코드스테이츠 블로깅(프로토타입 체인)

객체 지향 프로그래밍의 특성 중 상속을 JavaScript에서 구현할 때에는 프로토타입 체인을 사용한다.

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.

모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미.

프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라고 한다.

 

DOM과 프로토타입

브라우저에서 DOM을 이용하면, document.createElement('div')로 새로운 div 엘리먼트를 만들 수 있습니다.

이렇게 생성된 div 엘리먼트는, HTMLDivElement라는 클래스의 인스턴스입니다

인스턴스에 __proto__를 이용하면 부모 클래스의 프로토타입, 혹은 '부모의 부모 클래스'의 프로토타입을 탐색할 수 있습니다.

let div = document.createElement('div');

div.__proto__  // HTMLDivElement
div.__proto__.__proto__ // HTMLElement
div.__proto__.__proto__.__proto__ // Element
div.__proto__.__proto__.__proto__.__proto__ // Node
div.__proto__.__proto__.__proto__.__proto__.__proto__ // EventTarget
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ // object
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__ // null

EventTarget의 부모로는, 모든 클래스의 조상인 Object가 존재합니다.

null은 더 이상의 프로토타입이 없다고 정의되며, 프로토타입 체인의 종점 역할을 한다.