프로토타입 체인

< 목차 >

1. 프로토타입 체인
2. DOM과 프로토타입

---

• 객체 지향 프로그래밍의 특성 중 상속을 JavaScript에서 구현할 때에는 프로토타입 체인을 사용한다.
• 프로토타입 체인은 __proto__의 특징을 이용하여, 부모 객체의 프로퍼티나 메서드를 차례로 검색하는 것을 의미한다.
• 특정 객체의 프로퍼티나 메서드 접근 시 해당 객체에 접근하려는 프로퍼티나 메서드가 없다면 프로토타입의 내부슬롯의 참조에 따라 부모 객체의 프로퍼티 및 메소드에도 접근을 해 사용한다.

자바스크립트에서 extends와 super키워드를 이용하여 상속을 구현할 수 있다

1-1) extends

구문

class ChildClass extends ParentClass { ... }

• extends 키워드는 내장 객체뿐만 아니라 사용자 정의 클래스를 하위 클래스로 만들기 위해 사용될 수 있다.

1-2) super

• super 키워드는 부모 오브젝트의 함수를 호출할 때 사용된다.

문법

super([arguments]); // 부모 생성자 호출
super.functionOnParent([arguments]);

• 생성자에서는 super 키워드 하나만 사용되거나 this 키워드가 사용되기 전에 호출되어야 합니다. 또한 super 키워드는 부모 객체의 함수를 호출하는데 사용될 수 있다.

---

2.DOM과 프로토타입

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

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

• DOM 엘리먼트는 예를 들어 innerHTML과 같은 속성, 또는 append()와 같은 메서드가 있다.

• 각각의 엘리먼트가 해당 메서드나 속성이 있다는 것을 통해, Element라는 공통의 부모가 있음을 알 수 있다.

[div 엘리먼트의 상속관계]