S2-[Unit 2] 프로토타입 체인

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

예시:

let kimcoding = new Human('김코딩', 30);

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

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

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

'박해커'는 학생이기 이전에 사람이다. 따라서 Human의 메서드들을 상속받을 수 있다. 여기서 Human을 부모 클래스, 속성과 메서드를 물려받는 Student가 자식 클래스, 이 과정을 상속이라고 한다.

---

Dom과 프로토타입

div 엘리먼트의 상속 관계를 나타낸 그림이다.
document.createElement('div')로 생성된 div 엘리먼트는 HTMLElement 클래스의 인스턴스이다.

EventTarget이 최고 부모 클래스 이고, EventTarget의 부모로는 Object가 있다.

__proto__를 이용해 부모 클래스의 프로토타입, 부모의 부모 클래스의 프로토타입을 확인할 수 있다.
실습을 해보며 알아보자.

---

실습

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

div.__proto__ 
div.__proto__.__proto__
div.__proto__.__proto__.__proto__
div.__proto__.__proto__.__proto__.__proto__
div.__proto__.__proto__.__proto__.__proto__.__proto__
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__
div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__

각각 어떻게 출력이 될까?
div의 부모 프로토타입은 HTMLElement이다. 따라서 첫번째 줄은 HTMLElement가 출력된다.

---

그렇게 점점 따라 올라가다가 8번째 줄에서 EventTarget의 부모 클래스인 Object가 출력된다.

---

그렇다면 Object의 부모 클래스는 무엇일까?

Object는 모든 클래스의 최고 부모 클래스이기 때문에 null값이 출력된다.