[240130] 자바스크립트의 객체 생성 방법(객체 리터럴 vs new Object() vs 생성자 함수 vs 클래스)

객체 리터럴, new Object() - 객체 하나 만들 때

// 객체 생성 방법 1: 리터럴
const Person1 = {
  name: 'Ham',
  age: 24,
};

console.log(Person1.__proto__ === Object.prototype); // true
console.log(Person1.__proto__.constructor === Object); // true

// 객체 생성 방법 2: Object 생성자 함수
const Person2 = new Object();
Person2.name = 'Ham';
Person2.age = 24;

console.log(Person2.__proto__ === Object.prototype); // true
console.log(Person2.__proto__.constructor === Object); // true

	객체 리터럴	new Object()
특징	✔️ 속도가 빠르다.	✔️ Object 가 오버라이딩 될 수 있다.
공통점	✔️ 자바스크립트 엔진은 객체 리터럴로 객체를 생성하는 코드를 만나면 내부적으로 new Object() 생성자 함수를 사용 ⏩️ 결국 내부적으로 같다
프로토타입	✔️ Object.prototype ✔️ [객체].__proto__

 

---

생성자 함수, 클래스 - 객체를 찍어낼 틀이 필요할 때

// 객체 생성 방법 3: 생성자 함수
const Person3 = function (name, age) {
  this.name = name;
  this.age = age;
};
Person3.prototype.sayHi = function () {
  console.log('Hi!');
};
const person3 = new Person3('Ham', 24);

console.log(Person3.prototype === person3.__proto__);
console.log(Person3.prototype.constructor === Person3);

// 객체 생성 방법 4: 클래스
class Person4 {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHi() {
    console.log('Hi!');
  }
}
const person4 = new Person4('Ham', 24);

console.log(Person4.prototype === person4.__proto__);
console.log(Person4.prototype.constructor === Person4);

	생성자 함수	클래스
인스턴스 객체 생성	✔️ new 키워드 없이 호출하면 일반 함수로 호출	✔️ new 키워드 없이 호출 불가
for ... in	✔️ 메서드 열거 O	✔️ 메서드 열거 X
상속 체인	✔️ 상속 체인의 맨 위에는  Object.prototype 이 위치	✔️ 상속 체인의 맨 위에는 클래스 자신이 위치
상속 방법	✔️ 프로토타입 체인	✔️ extends 키워드
strict mode	✔️ 암묵적 X	✔️ 암묵적 O
constructor	✔️ 생성자 함수 프로토타입의 프로퍼티	✔️ 인스턴스 생성, 초기화를 위한 특수 메서드
프로토타입 메서드	✔️ 명시적 선언	✔️ 몸체 내부 선언
정적 메서드	✔️ 몸체 내부 선언	✔️ static 키워드 + 몸체 내부 선언
프로토타입	✔️ [생성자 함수 or 클래스].prototype ✔️ [인스턴스].__proto__

생성자 함수의 경우 함수 내부 선언이 아니라

직접 프로토타입 메서드를 추가해줘야 하지만,

클래스의 경우 내부 선언 시 자동으로 프로토타입 메서드가 된다.