[JS] class vs 생성자 함수 (feat:객체 생성)

- 객체 생성 방법 

1. 객체 리터럴 방법 :  내부적으로 obj.__proto__ === Object.prototype

const obj = {
  name: "Alice",
  age: 25,
};

 

2. new Object() 생성자 사용 :객체 리터럴이랑 동일한 결과임

const obj = new Object();
obj.name = "Alice";

 

3. 생성자 함수

function Person(name) {
  this.name = name;
}

const p = new Person("Alice");

 

 

 

4.class 로 만들기 

class Person {
  constructor(name) {
    this.name = name;
  }
}

const p = new Person("Alice");

 

5.  object.reate(proto) - 프로토타입 상속 기반 

const parent = { greet() { return "hi"; } };
const child = Object.create(parent);
child.name = "Alice";

 

6. Object.assign() -얕은 복사

const base = { name: "Alice" };
const copy = Object.assign({}, base);

 

7. JSON.parse() - 문자열에서 객체 생성 

 

8. Object.fromEntries() - 이건 2019 

 

- 상속 관계 

- object.create() 는 프로토타입기반의 상속을 할 수 있다

-Object.setPrototypeOf()

클래스 vs 생성자 함수 

클래스 같은 경우는 아래와 같이 나온다.  => ClassName.prototype

// 클래스 문법
class Person {
  name; // 이건 필드 선언 (실제로는 constructor에서 초기화됨)

  constructor(name) {
    this.name = name; // 👈 인스턴스에 직접 저장됨
  }

  talk() {
    return `${this.name} Talking`; 
    // 👈 이 메서드는 prototype에 저장됨
  }
}

const me = new Person("so");
console.log(me);
// ✅ 'name'은 인스턴스의 프로퍼티로 들어가고,
// ✅ 'talk'은 prototype에 저장되어 있기 때문에,
//    me에는 직접 안 보이고, __proto__ (혹은 [[Prototype]]) 안에 존재함

 

 

- 생성자 함수 같은 경우 => 인스턴스 자체

// 함수 생성자 방식
const Person2 = function (name) {
  this.talk = function () {
    return `${name} Talking`;
  }
};

const me2 = new Person2("so");
console.log(me2);
// ✅ 이 경우 'talk' 함수는 인스턴스(me2)의 '직접적인 속성'으로 들어감
//    즉, prototype 안에 있지 않고, 바로 me2.talk 으로 존재함

 

 

이렇게 되면 일단 그냥 기본적으로 쓰는거에는 문제는 없어보이지만 

 

1. 클래스일 경우 모든 인스턴스가 메서드가 공유되지만 생성자 함수로 생성할 경우 인스턴스마다 매서드 새로 생성된다.

2. 공통 로직을 수정하거나 유지보수할 경우 

  클래스로 만들면 크래스 쪽만 수정하면 되지만 생성자 함수는  인스턴스마다 매서드가 복사되므로 각각 수정을 해야되는 점이 또 다른 점이다.

 

- 만일 상속을 하게 된다면 ?

class만들어서 상속할 경우 

Superman { name: 'so' }
  name: "so"
  [[Prototype]]: Person
    constructor: class Superman
    fly: function fly()
    [[Prototype]]: Object