[Javascript] 프로토타입 체인

 

지난 포스팅에서 이어집니다.

 

[Javascript] 클래스와 객체지향 프로그래밍

 

지난 포스팅에서 다음과 같이 클래스 Cleaner와 그 클래스를 상속받는 서브클래스 CleanerPlus를 생성했다.

 

class Cleaner {
  constructor(name, department) {
    this.name = name;
    this.department = department;
  }
  clean() {
    return `${this.name} has cleaned the ${this.department}.`;
  }
}


class CleanerPlus extends Cleaner {
  constructor(name, department, pet) {
    super(name, department);
    this.pet = pet;
  }
  petSitting() {
    return `${this.name} can take care of ${this.pet}.`;
  }
}

let cleaner3 = new CleanerPlus("Yoon", "bathroom", "cats");
console.log(cleaner3.clean()); //Yoon has cleaned the bathroom.
console.log(cleaner3.petSitting()); //Yoon can take care of cats.

 

1. 프로토타입 체인

 

위에서 생성한 인스턴스 cleaner3은 서브클래스를 통해 만들어진 인스턴스지만

서브클래스가 슈퍼클래스의 프로토타입을 상속받기 때문에 슈퍼클래스 Cleaner가 가지고 있는 기능을 모두 수행할 수 있다.

 

cleaner3.clean();을 실행하면 먼저 cleaner3이 가지고 있는 메서드를 확인한 뒤

clean 메서드를 찾지 못하고 prototype 슬롯을 타고 올라가 CleanerPlus의 프로토타입이 가진 메서드를 확인한다.

이때도 clean 메서드는 발견되지 않을 것이기 때문에 또 다시 prototype 슬롯을 타고 올라가 탐색하게 되고

Clenaer 프로토타입에서 clean 메서드를 발견하고 이것을 실행한다.

 

이것을 그림으로 나타내면 다음과 같다.

 

 

2. 프로토타입, prototype 슬롯, prototype 프로퍼티, __proto__ 프로퍼티

 

프로토타입 공부를 하다 보면 가장 헷갈리는 것이 용어다.

용어가 다 비슷비슷해서 구별하기 어려워 정리를 해 보았다.

 

프로토타입

프로토타입 객체 자체를 의미한다.

모든 객체는 하나의 프로토타입을 갖는다.

 

prototype 프로퍼티

생성자 함수가 생성할 인스턴스의 프로토타입을 가리키는 프로퍼티다.

생성자 함수뿐 아니라 모든 함수에 prototype 프로퍼티가 들어 있다.

그러나 prototype 프로퍼티는 상속을 구현하기 위해서 필요한 것이기 때문에

객체를 생성하지 않는 일반 함수는 prototype 프로퍼티를 가진다 해도 별 의미는 없다.

 

prototype 슬롯

모든 객체가 기지고 있는 내부 슬롯. 이중 대괄호([[...]])로 감싼 형태로 표시된다.

내부 슬롯이라는 것은 프로퍼티와 달라 존재는 하지만 직접 접근할 수는 없게 되어 있다.

예컨대 cleaner3.[[prototype]] 이런 식으로 접근할 수 없다는 것이다.

예외적으로 prototype 슬롯은 __proto__라는 접근자 프로퍼티를 통해서 간접적으로 접근할 수 있다.

 

__proto__

prototype 슬롯에 접근하기 위한 접근자 프로퍼티.

이 프로퍼티는 객체의 직접 소유가 아니라 Object.prototype의 프로퍼티다.

인스턴스 cleaner3을 콘솔에 찍어 보면 다음과 같이 __proto__ 프로퍼티가 깊이 숨겨져 있는 것을 볼 수 있다.