프로토타입 체인

프로토타입 체인

JavaScript에서 변수를 객체,배열,함수로 선언하면 상위 객체의 프로퍼티를 호출할 수 있는데, 여기서 말하는 상위 객체를 프로토타입이라 하고 상위 객체의 프로퍼티를 호출할 수 있도록 해주는 메커니즘을 프로토타입 체인이라고 한다.

위에 사진을 보면 Iphone14라는 함수는 Iphone에 의해 생성되었다.

.prototype은 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의된다.

__proto__를 이용하면 부모 클래스의 프로토타입, 혹은 '부모의 부모 클래스'의 프로토타입을 탐색한다.

Object는 가장 상위 클래스이다.

Iphone.prototype은 Iphone의 속성과 메서드를 prototype에 정의하게 되고,
Iphone14.__proto__ Iphone.prototype를 상속받았기 때문에 Iphone의 속성과 메서드를 불러올 수 있게된다.

DOM과 프로토타입

브라우저에서 DOM을 이용하면, document.createElement('div')로 새로운 div 엘리먼트를 만들 수 있다. 이렇게 생성된 div 엘리먼트는, HTMLDivElement라는 클래스의 인스턴스를 가지고있다.

화살표 방향은 부모를 가리킨다. EventTarget의 부모로는, 모든 클래스의 조상인 Object가 존재한다.
인스턴스의 __proto__를 이용해서 확인해보도록 하자!

extends와 super로 하위객체 상속받기