Chapter 4 - Item 30. prototype, getPrototypeOf, __proto__ 차이를 이해하라

자바스크립트에서 상속 구조를 이해하려면 prototype, Object.getPrototypeOf, __proto__의 차이를 정확히 알아야 한다.
겉보기엔 비슷해 보이지만, 용도와 쓰임새가 다르다.

 

1. prototype - 생성자 함수의 설계도

 

prototype은 함수(특히 생성자)가 가진 속성이다.
여기에 정의한 메서드와 속성은 해당 생성자로 만든 모든 인스턴스가 공유한다.

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  console.log(`Hi, I'm ${this.name}`);
};

const p = new Person("Alice");
p.sayHello(); // "Hi, I'm Alice"

 

 

2. Object.getPrototypeOf() - 인스턴스의 부모 찾기

 

Object.getPrototypeOf(obj)는 이미 만들어진 객체가 어떤 프로토타입을 참조하는지 반환한다.

const proto = Object.getPrototypeOf(p);
console.log(proto === Person.prototype); // true

 

 

3. __proto__ - 옛날 방식의 접근

 

__proto__는 객체에서 프로토타입을 읽거나 바꾸는 비표준 속성이었다.
ES6에서 명세에 포함됐지만, 성능과 유지보수 문제로 여전히 비권장이다.

console.log(p.__proto__ === Person.prototype); // true

대신 Object.getPrototypeOf와 Object.setPrototypeOf를 사용하는 것이 안전하다.

 

 

 

• 메서드 정의는 prototype에,
• 부모 확인은 Object.getPrototypeOf
• __proto__ 사용은 피하자.

 

ES6 이후,  class 문법은 내부적으로 prototype을 자동 연결한다.

또한, 프로토타입 조작은 Object.create, Object.setPrototypeOf 같은 표준 API를 우선 사용한다.