프로토타입 체인

객체 지향 프로그래밍의 특성 중 상속을 자바스크립트에서 구현할 때는
프로토타입 체인을 이용한다. 예시로 들기 위해, 학생과 사람(Human)이라는 클래스가 각각 존재한다고 가정해보면,

let kim = new Human('김', 30);

// 속성
kim.age;
kim.gender;
// 메서드
kim.eat();
kim.sleep();

여기서 학생이기전엔 사람이라 클래스 Student는 Human의 기본적인 메서드를 상속받을 수 있다. 하지만 학생은 일반적인 사람 + 추가적인 특징이 필요하다.

let parkhacker = new Student('박해커', 22);

// 속성
park.grade;
// 메서드
park.learn();

여기서 나타나는 park은 student이다. 하지만 park이 학생이라고 해서 Human에 있는 age, gender같은 속성이 존재하지 않는건 아니다. Student는 Human의 특징을 그대로 이어받는다. 여기서 부모클래스는 Human, 자식클래스는 Student이다.

DOM과 프로토타입

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

위 그림은 div 엘리먼트의 상속 관계이다.
EventTarget의 부모로는 Object가 존재한다.
더 확실하게 확인하려면

__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

위와같이 예시를 들면 쉽게 확인 가능하다.