프로토타입 체이닝(1)

프로토타입

자바스크립트는 프로토타입 기반의 언어이다. 일반적인 객체지향 프로그래밍에서는 클래스를 정의하고 이 클래스를 통해서 새로운 객체를 생성한다. 하지만 자바스크립트에서는 이와 다르게 생성자 함수를 통해서 객체를 생성한다. 자바스크립트에서는 이렇게 생성된 객체의 부모가 되는 객체를 프로토타입이라고 말한다.

모든 객체는 자신의 부모 객체를 가리키는 참조 링크 형태의 프로퍼티인 [[Prototype]] 프로퍼티를 가진다. ECMAscript에서는 이 링크를 암묵적 프로토타입 링크라고 부른다.

자바스크립트에서는 생성자 함수로 객체를 생성하면 생성자 함수의 prototype 프로퍼티가 가리키는 프로토타입 객체를 새로 생성되는 객체가 [[Prototype]] 링크로 연결하게 된다.(생성자의 prototype 프로퍼티와 생성된 객체의 [[Prototype]]프로퍼티가 가리키는 객체는 같은 프로토타입 객체다.) 즉, 자바스크립트에서 객체를 생성하는 것은 생성자 함수의 역할이지만, 실제로 객체의 부모가 되는 것은 생성자 함수의 프로포타입 객체이다.

프로토타입 체이닝

자바스크립트에서 객체는 자신의 프로퍼티뿐만 아니라 프로토타입 객체의 프로퍼티에도 접근할 수 있다. 프로토타입 체이닝이 이것을 할 수 있게 만든다. 프로토타입 체이닝은 객체 생성 방식에 따라서 다르게 작동한다. 객체 생성 방식에 따른 프로토타입 체이닝을 알아보자.

객체 리터럴 방식으로 생성된 객체의 프로토타입 체이닝

객체 리터럴 방식으로 생성된 객체는 내부적으로 Object() 내장 생성자 함수로 생성된다. Object() 생성자도 생성자 함수이기 때문에 똑같이 prototype 프로퍼티를 가진다. Object() 생성자 함수의 프로토타입은 Object.prototype 객체이다. 따라서 객체 리터럴로 생성되는 객체는 Object.prototype 객체와 [[Prototype]] 프로퍼티로 연결되어 있다. 객체 리터럴 방식으로 생성되는 객체를 살펴보자.

위 그림을 보면 알 수 있듯이 objectEx 객체는 Object 객체(Object.prototype 객체)를 프로토타입 객체로 연결하고 있다.

자바스크립트에서 특정 객체에 프로퍼티나 메서드에 접근하려고 할 때, 해당 객체에 접근하려는 프로퍼티나 메서드가 존재하지 않을 때 해당 객체의 [[Prototype]] 프로퍼티로 연결된 프로토타입 객체의 프로퍼티에서 찾아서 호출하는 것을 프로토타입 체이닝이라고 한다. 이런 원리로 자바스크립트의 모든 객체들이 Object.prototype 객체에 담겨있는 표준 객체 메서드를 사용할 수 있는 것이다.

생성자 함수로 생성된 객체의 프로토타입 체이닝

생성자 함수로 생성된 객체는 객체 리터럴로 생성되는 객체와 프로토타입 체이닝 방식이 조금 다르지만 같은 원칙으로 이뤄진다.

자바스크립트에서 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 프로토타입 객체로 취급한다.

예제 코드로 자세히 알아보자.

생성자 함수로 생성된 객체는 생성자의 프로토타입 객체를 프로토타입으로 연결한다. 이 프로토타입 객체는 다시 Object.prototype 객체와 [[Prototype]] 프로퍼티로 연결된다. 따라서 생성자 함수로 생성된 객체는 표준 객체 프로퍼티를 사용할 수 있다.

프로토타입 체이닝의 종점

자바스크립트에서 프로토타입 체이닝의 종점은 Object.prototype 객체이다. 결국 모든 객체에서의 프로토타입 체이닝은 Object.prototype 객체에서 끝난다는 말이다.

이 말은 모든 객체는 Object.prototype 객체를 공유하고 이 객체의 프로퍼티와 메서드에 접근할 수 있다는 말이다. 앞에서도 말했지만 Object.prototype 객체에는 자바스크립트 표준 객체 메서드가 정의되어있다.