1. Prototypes and the prototype chain

• 프로토타입은 자바스크립트에서 객체가 서로 기능을 상속시키는 방법이다.
• 이 문서는 프로토타입이 무엇인지, 프로토타입 체인은 어떻게 작동하는지, 그리고 객체에 프로토타입을 설정하는(set, assign) 방법에 대해 다룬다.

const myObject = {
  city: "Madrid",
  greet() {
    console.log(`Greetings from ${this.city}`);
  },
};

myObject.greet(); // Greetings from Madrid

• 콘솔에 이런 코드를 작성해보자. myObject를 city라는 프로퍼티와 greet라는 메소드를 가진 객체로 정의하였다.

  • 만약 콘솔에 myObject. 을 입력한다면, 콘솔은 아래와 같이 해당 객체가 사용할 수 있는 프로퍼티와 메소드의 목록을 보여줄 것이다.

    __defineGetter__
    __defineSetter__
    __lookupGetter__
    __lookupSetter__
    __proto__
    city
    constructor
    greet
    hasOwnProperty
    isPrototypeOf
    propertyIsEnumerable
    toLocaleString
    toString
    valueOf
    

  • 직접 정의한 city와 greet외에도 많은 프로퍼티를 가지고 있는 것을 확인할 수 있다.

    • 이런 프로퍼티들은 우리가 정의한 적이 없다. 그럼 어디서 오는걸까? 이게 바로 프로토타입 덕분에 가능하다.

프로토타입과 프로토타입 체인

• JavaScript의 모든 객체object는 prototype이라는 built-in 프로퍼티를 가진다. (이게 아마 [[prototype]]를 말하는듯 하다)
  • 그런데 프로토타입 또한 그 자체로 객체이고, 따라서 프로토타입 역시 “프로토타입의 프로토타입”을 가지게 되는데, 이것을 프로토타입 체인prototype chain이라고 부른다.
    • 체인은 프로토타입의 프로토타입이 null일때 종료되게 된다. (end of the chain)
    • 어떤 객체를 통해 프로퍼티에 접근할때, JavaScript는 해당 객체에 프로퍼티가 있는지 먼저 확인하고, 없으면 객체의 프로토타입을 확인하고, 없으면 계속해서 찾을때까지 프로토타입의 프로토타입을 확인하는 식으로 프로토타입 체인을 통해 탐색을 이어나간다.
      • 체인이 끝날때까지 못찾으면 undefined를 반환한다

객체의 프로토타입에 접근하는 방법

1. (deperecated) __proto__ 프로퍼티로 접근하기. (즉 myObject.__proto__ 와 같은 식으로 사용)
   • 객체의 프로토타입을 가리키는 프로퍼티는 prototype이 아니라 __proto__다! 헷갈리지 않도록 주의하자.
2. 더 공식적인 방법 - Object.getPrototypeOf() 함수 사용하기
   • 인자로 프로토타입에 접근하고 싶은 대상 객체를 넣으면 된다.

그럼 실제로 위 코드의 myObject의 프로토타입이 뭔지 확인해보자.

Object.getPrototypeOf(myObject);

• 웬 객체가 나오는데, 내부를 살펴보면 constructor: f Object() 를 확인할 수 있다. 즉 Object.prototype 객체인 것이다.

• Object.prototype 은 사실 가장 기본적인 프로토타입으로서, 모든 객체가 default로 가지고 있는 프로토타입이기도 하다. 가장 기본의 프로토타입이기 때문에, Object.prototype 의 프로토타입은 null이다.

  

  그림으로 표현하면 이와 같다.

  • 실제로 콘솔에 Object.prototype.__proto__와 Object.getPrototypeOf(Object.prototype)를 해보니 null이 나왔다!

당연히 모든 객체의 프로토타입이 Object.prototype인 것은 아니다. (다만 단군할아버지가 항상 Object.prototype인건 맞는거겠지??) + 프로토타입 체인 예시

const myDate = new Date();
let object = myDate;

do {
  object = Object.getPrototypeOf(object);
  console.log(object);
} while (object);

// Date.prototype
// Object { }
// null

• 프로토타입 체인이 끝날때까지 체인을 탐색하는 코드이다.

  

  • 이와 같은 구조로 되어 있다고 볼 수 있다.
  • myDate객체의 __proto__프로퍼티는 Date.prototype 객체를 가리키고, Date.prototype의 __proto__프로퍼티는 다시 Object.prototype을 가리키는 것이다.
  • 만약 myDate.getMonth()와 같이 메소드를 호출하는 경우, 체인을 통해 Date.prototype에 정의된 메소드를 찾아 호출하는 것이다(myDate객체엔 getMonth 메소드가 정의되어 있지 않다)