모던 자바스크립트 Deep Dive 읽기 - 19장 : 프로토타입

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

자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다. 생성자 함수를 선언할 때 함수의 prototype 프로퍼티에 메서드를 바인딩시켜서 이를 구현한다. 

funciton 생성자함수(매개변수) {
(...)
}
생성자함수.prototype.메서드 = function() {
(...)
}

 

프로토타입은 상속을 구현하기 위해 사용된다. 모든 객체는 [[Prototype]]이란 내부 슬롯을 가지며, 이 내부 슬롯의 값은 프로토타입의 참조다. 객체가 생성될 때 프로토타입이 결정되고 이 슬롯에 저장된다. 

프로토타입에 접근하기 위해서는 접근자 프로퍼티를 이용한다. 이는 단방향 링크드 리스트로 구현되어야 하는 프로토체인이 순환 참조 같은 루프에 빠지지 않기 위함이다.

 

함수 객체만이 소유하는 prototype 프로퍼티는, 생성자 함수가 생성할 인스턴스의 프로토타입을 가리킨다. 

모든 프로토타입은 constructor 프로퍼티를 갖는다. 이 프로퍼티는 prototype의 프로퍼티로, 자신을 참조하고 있는 생성자 함수를 가리킨다. 이 연결은 생성자 함수가 함수 객체로 생성될 때 이뤄진다. 

리터럴 표기법에 의해 생성된 객체도 상속을 위해 프로토타입이 필요하다. 프로토타입과 생성자 함수는 단독으로 존재할 수 없으므로, 이러한 객체도 생성자 함수와 연결된다. 즉 모든 객체가 생성자 함수와 연결되어 있다. 

 

생성자 함수로 호출되는 함수는 함수 정의가 평가되어 함수 객체를 생성하는 시점에 프로토타입도 더불어 생성된다. 생성된 프로토타입은 생성자 함수의 prototype 프로퍼티에 바인딩된다. 빌트인 생성자 함수도 전역 객체가 생성되는 시점에 생성된다. 이렇게 객체가 생성되기 이전에 생성자 함수와 프로토타입은 객체화되어 존재한다. 

 

자바스크립트는 객체의 프로퍼티에 접근하려고 할 때 해당 프로퍼티가 없다면, 내부 프로토타입 슬롯의 참조를 따라 자신의 프로토타입의 프로퍼티를 순차적으로 검색한다. 이를 프토토타입 체인이라 한다. 이를 통해 자바스크립트의 상속이 구현된다. 

 

프로토타입 프로퍼티와 같은 이름의 프로퍼티를 인스턴스에 추가하면, 프로토타입의 프로퍼티를 바꾸는 것이 아닌 인스턴스의 프로퍼티가 추가(오버라이딩)된다.  

 

instanceof 연산자를 통해 객체의 프로토타입 체인에서 특정 생성자 함수가 존재하는지 확인할 수 있다. 

console.log(객체 instanceof 생성자함수);

Object.create 메서드를 통해 명시적으로 프로토타입을 지정하여 객체를 생성할 수 있다. 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create

Object.create() - JavaScript | MDN

생성자 함수는 객체이므로, 자신만의 프로퍼티/메서드를 소유할 수 있다. 생성자 함수 객체가 소유한 프로퍼티/메서드를 정적 프로퍼티/메서드라고 한다.