[js] 프로토타입 체인

🎉 프로토타입 체인이란?

자바스크립트는 객체의 프로퍼티와 메서드에 접근하려고 할 때, 해당 객체에 접근하려는 프로퍼티가 없다면 자신의 프로토타입 참조를 따라가 자신의 부모역할을 하는 프로토타입 객체의 프로퍼티를 순차적으로 검색한다.
= 이를 프로토 타입 체인이라고한다.

프로토타입 체인은 프로토타입 기반 객체지향 프로그래밍의 상속을 구현하는 메커니즘이다.

🎉 프로토타입 체인 예시

class Animal {
  constructor(name) {
    this.name = name;
  }
  getName() {
    return this.name;
  }
}

class Cat extends Animal {
  say(){
    console.log("야옹");
  }
}

getName은 Cat 클래스에 없지만 사용이 가능하다.

Cat 클래스의 인스턴스인 cat이 어떻게 Animal 클래스가 가지고 있는 getName 메서드를 사용할 수 있을까? 

• Cat 클래스가 Animal 클래스를 상속받아 프로토타입이 연결되어있기 때문이다.

프로토타입에 대한 설명은 이전 글을 참고

https://12ahn22.tistory.com/entry/js-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85

[js] 프로토타입

동작 원리

클래스는 생성 시, 자신과 쌍을 이루는 prototype 객체를 만든다.

이 프로토타입 객체는 클래스의 prototype이라는 프로퍼티에 참조된다. 그리고 해당 클래스로 생성한 인스턴스들의 __proto__ 즉, 부모 역할을 하는 프로토타입 객체가 된다.

생성된 prototype 객체가 클래스의 prototype인게 아니다. 인스턴스들의 부모 역할을 하는 프로토타입 객체가 된다.

Cat 클래스의 prototype프로퍼티(프로토타입)는 인스턴스인 cat의 __proto__

클래스 Cat은 extends 키워드를 사용해 Animal 클래스를 상속받는다. 따라서 Cat.prototype, 클래스 Cat을 생성 시 같이 생성되는 프로토타입 객체의 프로토타입이 Animal 클래스의 prototype이 된다. 대략 아래 그림처럼 된다.

 

클래스와 인스턴스의 관계

__proto__는 프로토타입 연결을 보기 쉽게하려고 써놓은 것이지 실제로 프로퍼티로 존재하는 것은 아니다.

prototype은 [[Prototype]]이라는 내부 객체에 존재하고 간접적으로 __proto__or Object.getPrototypeOf() 를 통해 참조가능하다.

• 그림에는 표시하지않았지만 Cat클래스의 __proto__는 Animal 클래스다. Animal클래스의 __proto__는 Function.prototype

Cat의 프로토타입 Animal 클래스

cat의 프로토타입인 Cat.prototype

Cat.prototype의 프로토타입인 Animal.prototype

 

Animal.prototype의 프로토타입인 Object.prototype

연결 관계를 알았다면 이제 프로토타입 체인을 확인해보자.

• cat 인스턴스에서 getName 메서드를 호출하는 경우 cat 인스턴스 객체에서 getName을 찾는다.
• 그러나 발견할 수 없기때문에 __proto__를 참조해 프로토타입 객체로 이동한다. = 프로토타입 체인
• Cat.prototype에서 getName을 찾는다.
• 없기때문에 다시 __proto__를 참조해 프로토타입 객체로 이동한다.
• Animal.prototype에서 getName을 찾아서 사용한다.
• 만약, 계속 프로토타입을 올라가서 찾지 못한 경우 undefined가 된다.
  • 프로토타입의 최상단은 Object.prototype이다. Object.prototype은 모든 객체의 부모이다.

🎉 정리해보기

자바스크립트의 모든 객체는 자신의 부모 역할을 하는 프로토타입 객체를 가지고 있다.
- 프로토타입 객체는 __proto__나 Object.getPrototypeOf을 사용해 참조할 수 있다.
- 해당 객체에 프로퍼티가 존재하지 않는 경우 객체의 프로토타입에서 해당 프로퍼티를 찾는다.

이렇게 객체의 프로토타입 -> 프로토타입으로 이동하면서 식별자를 찾는 행위를 프로토타입 체인이라고 한다.