javascript.info - 프로토타입과 프로토타입 상속

프로토타입 상속

- 자바스크립트의 모든 객체엔 숨김 프로퍼티인 [[Prototype]]이 있고, 이 프로퍼티는 객체나 null을 가리킨다.

- obj.__proto__ 를 사용하면 프로토타입에 접근 가능. (요즘엔 __proto__ 대신, Object.getPrototypeOf나, Object.setPrototypeOf를 써서 프로토타입을 get or set 한다.

- [[Prototype]]은 prototype이라는 객체를 참조한다.

- 객체에서 프로퍼티를 읽거나 메서드 호출 시, 해당 객체 내에 읽으려는 프로퍼티나 메서드가 없으면 자바스크립트는 자동으로 프로토타입에서 해당 프로퍼티나 메서드를 찾는다.

- 프로토타입 내에 getter, setter가 없는 경우, 쓰기나 지우기 관련 연산은 객체에 직접 적용된다.

 

 

F.prototype

new F() 같은 생성자 객체를 생성하는 경우, F.prototype이 객체라면 생성자 new 오퍼레이터가 자동으로 [[Prototype]]을 설정해 줌.

let animal = {
  eats: true
};

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

Rabbit.prototype = animal;

let rabbit = new Rabbit("흰 토끼"); //  rabbit.__proto__ == animal

alert( rabbit.eats ); // true

** Rabbit.prototype = animal; //생성자가 호출되기 전의 .prototype은 프로퍼티 일 뿐.

Rabbit의 [[Prototype]]이 animal이 아니라, 생성자를 통해 만들어진 객체인 rabbit의 [[Prototype]]이 animal임!

=> 생성자(위의 예제에서는 new Rabbit)를 통해 만든 새로운 객체의 [[Prototype]]을 animal로 설정하라는 의미.

 

Default F.prototype, constructor property

function(함수)은 prototype프로퍼티를 기본적으로 갖고 있다.

prototype의 디폴트 값은 자기 자신을 가리키는 constructor(생성자)만 갖고 있는 객체이다.

 

확인방법.

function Rabbit() {}
// by default:
// Rabbit.prototype = { constructor: Rabbit }

alert( Rabbit.prototype.constructor == Rabbit ); // true

constructor 프로퍼티.

[[Prototype]]은 자동으로 constructor 프로퍼티를 갖고 있다.

BUT, 자바스크립트는 constructor 값을 맞게 지정해줄 것이라는 보장이 없어서, 우리가 지정해줘야 함.

Rabbit.prototype = {
  jumps: true,
  constructor: Rabbit
};

// now constructor is also correct, because we added it

---

Native prototypes 내장 객체의 프로토타입

프로토타입 프로퍼티는 자바스크립트에 많이 사용되는 개념. 모든 내장 생성자 함수가 사용하고 있다.

let arr = [1, 2, 3];

// it inherits from Array.prototype?
alert( arr.__proto__ === Array.prototype ); // true

// then from Object.prototype?
alert( arr.__proto__.__proto__ === Object.prototype ); // true

// and null on the top.
alert( arr.__proto__.__proto__.__proto__ ); // null

Chrome 개발자 콘솔과 같은 도구를 통해 상속 관계 확인 가능.

console.dir를 사용해 내장 객체의 상속 관계를 확인 가능.

 

원시값의 프로퍼티에 접근하려 하면, 내장 생성자를 사용하는 임시 Wrapper 객체가 생성된 후 필요 메서드 제공 후 사라진다.

 

---

프로토타입 메서드와 __proto__가 없는 객체

브라우저 환경에서 __proto__는 구식.. 다음의 메서드 사용 권장.

• Object.create(proto, [descriptors]) : [[Prototype]]이 proto를 참조하는 빈 객체를 만든다. 이때 프로퍼티 설명자를 추가로 넘길 수 있다.
• Object.getPrototypeOf(obj) : obj의 [[Prototype]]을 반환.
• Object.setPrototypeOf(obj, proto) : obj의 [[Prototype]]이 proto가 되게 설정.