프로토타입 체인 개념

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

예제 학생(student), 사람(Human) 클래스 각각 존재
클래시 Human의 메서드와 속성을 객체로 구현

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

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

예제 student

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

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

위 예제에서 박해커는 Student이지만 Human의 특징을 그대로 물려받는다 속성과 메서드를 물려주는 클래스를 부모 클래스(여기서는 Human), 속성과 메서드를 물려받는 클래스를 자식 클래스(여기서는 Student), 그리고 이 과정을 상속이라

DOM과 프로토타입

브라우저 DOM을 이용시에 div 엘리먼트 생성하고
인스턴스의 __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