프로토타입 체이닝

프로토타입의 두 가지 의미

자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원한다.

자바스크립트가 어떻게 OOP 기능을 제공할까? 이에 앞서 자바스크립트 OOP 상속에 근간이 되는 프로토타입과 프로토타입 체이닝의 기본 개념을 설명한다.

자바스크립트는 자바와 같은 객체지향 프로그래밍에서처럼 "클래스" 개념이 없다. 대신에 객체 리터럴 또는 생성자 함수로 객체를 생성한다. 이렇게 생성된 객체의 부모 객체가 바로 "프로토타입" 객체다. 즉, 상속 개념과 마찬가지로 자식 객체는 부모 객체가 가진 프로퍼티 접근이나 메서드를 상속받아 호출하는 것이 가능하다.

 

자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체를 가리키는 참조 링크 형태의 숨겨진 프로퍼티가 있다. ECMAScript에서는 이러한 링크를 암묵적 프로토타입 링크라고 부르며 이러한 링크는 모든 객체의 [[Prototype]] 프로퍼티에 저장된다.

여기서 주의해야 할 점은, 함수 객체의 prototype 프로퍼티와 [[Prototype]] 링크를 구분해야 한다는 것이다. 이 둘의 차이점을 이해하려면 자바스크립트의 객체 생성 규칙을 알아야 한다. 

자바스크립트에서 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 프로토타입 객체를 자신의 부모 객체로 설정하는 [[Prototype]] 링크로 연결한다.

 

예제를 알아보자.

// Person 생성자 함수
function Person(name) {
   this.name = name;
}

// foo 객체 생성
const foo = new Person('foo')

Person() 생성자 함수는 prototype 프로퍼티로 자신과 링크된 프로토타입 객체(Person.prototype)을 가리킨다.  그리고 Person() 생성자 함수로 생성된 foo 객체는 Person() 함수의 프로토타입 객체를 [[Prototype]] 링크로 연결한다. 결국, prototype 프로퍼티나 [[Prototype]] 링크는 같은 프로토타입 객체를 가리키고 있다.

prototype 프로퍼티는 함수의 입장에서 자신과 링크된 프로토타입 객체를 가리키고 있으며, 이에 반해 [[Prototype]] 링크는 객체의 입장에서 자신의 부모 객체인 프로토타입 객체를 내부의 숨겨진 링크로 가리키고 있다.

 

결국, 자바스크립트에서 객체를 생성하는 건 생성자 함수의 역할이지만, 생성된 객체의 실제 부모 역할을 하는건 생성자 자신이 아닌 생성자의 prototype 프로퍼티가 가리키는 프로토타입 객체다.

 

프로토타입 체이닝

자바스크립트에서 특정 객체의 프로퍼티나 메서드에 접근하려고 할 때, 해당 객체에 접근하려는 프로퍼티 또는 메서드가 없다면 [[Prototype]] 링크를 따라 부모 역할을 하는 프로토타입 객체의 프로퍼티를 차례대로 검색하는 것이다.