javascript 프로토타입(prototype) 에 대해 이해하기

1. 프로토타입 객체

 자바스크립트는 클래스 기반의 객체지향이 아닌 프로토타입 기반 객체지향 프로그래밍 언어이다.
그러므로 프로토타입이 무엇인지 잘 이해하고 넘어가야 한다.

 

클래스 기반 객체지향 언어의 경우 객체를 생성하기 전에 클래스를 정의 후 객체를 생성하지만
프로토타입 기반은 클래스가 없어도(ES6 클래스 추가) 객체를 생성할 수 있다.

자바스크립트에서는 객체를 생성할 때 프로토타입이 결정되나 다른 임의이 객체로 변경이 가능하다.

 1) 자바스크립트 객체 생성방법

  let human = { eats : true};
  let studuent = { study : true };
  
  studuent.__proto__ = human;
  studuent.eats;

  - [[Prototype]]의 값은 Prototype(프로토타입) 객체이며 __proto__ accessor property로 접근할 수 있다.
  - __proto__프로퍼티에 접근하면 내부적으로 Object.getPrototypeOf가 호출되어 프로토타입 객체를 반환한다.
  - studuent객체는 __proto__프로퍼티로 자신의 부모 객체(프로토타입 객체)인 human을 참조하고 있다.
 

2. [[prototype]] vs prototype 프로퍼티

 - 모든 객체는 자신의 프로토타입 객체를 가르키는 [[Prototype]] 인터널 슬롯(internal slot)을 갖으며 상속을 위해 사용된다.
 - 자바스크립트의 함수도 객체이므로 [[Prototype]] 인터널 슬롯 갖고 있으며 추가적으로 prototype 프로퍼티도 있다.

 - prototype 프로퍼티, [[[Prototype]]은 프로토타입 객체를 가르키지만 관점의 차이가 있따.

 1) [[prototype]]

   - 함수를 포함한 모든 객체가가지고 있는 인터널 슬롯(Internal slot)이다.
   - 객체의 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가르키며 함수 객체의 경우 Function.prototype을 가르킨다.

  2) prototype 프로퍼티

  - 함수 객체만 가지고 있는 프로퍼티이다.
  - 함수 객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(프로토타입 객체)를 가르킨다.

function Person(name) {
    this.name = name;
}
var foo = new Person('Lee');
console.dir(Person);         // prototype 프로퍼티가 있다.
cosnole.dir(foo);            // prototype 프로퍼티가 없다.

// 함수 객체일 경우 [[Prototype]]은 Function.prototype을 가리킨다.
console.log(Person.__proto__ === Function.prototype); // true

// 함수 객체가 생성자로 사용될 때 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(프로토타입 객체)를 가르킨다.
console.log(Parson.prototype === foo.__proto__); // true

3. constructor(생성자) 프로퍼티
 프로토타입 객체는 constructor 프로머티를 갖는다. 이 contructor 프로퍼티는 객체의 입장에서 자신을 생성한 객체를 기리킨다.
 
 function Person(name) {
this.name = name;
 }
 
 var foo = new Person('Lee');
 
 
 console.log(foo.__proto__ == Person.prototype);        // true
 
 // Person() 생성자 함수에 의해 생성된 객체를 생성한 객체는 Person() 생성자 함수이다.
 console.log(Person.prototype.constructor === Person);  // true
 // foo 객체를 생성한 객체는 Person() 생성자 함수이다.
 console.log(foo.constructor === Person);               // true
 // Person() 생성자 함수를 생성한 객체는 Function() 생성자 함수이다.
 console.log(Person.constructor === Function);          // true
 
4. Prototype chain
 자바 스크립트는 특정 객체의 프로퍼티나 메소드에 접근하려고 할 때 객체에 접근하려는 프로퍼티 또는 메소드가 없을 경우
 [[Prototype]]이 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색한다.
 이것을 프로토타입 체인이라고 한다.