[JS] chapter18. 포로토타입과 체인

 

 

 

 

 

 

 

 

 

📌 프로토타입과 체인

 

상속 -> 프로토타입 체인

 

 

실습 코드

 

학생과 사람이라는 클래스가 각각 존재한다고 가정

human 객체 구현

 

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

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

 

human의 기본적인 메서드를 상속

 

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

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

 

코드설명

 

박해커 -> student

student는 human의 특징을 그대로 물려받게 된다면 박해커의 나이 성별 확인 가능

 

부모 클래스 -> 자식 클래스로 가는 과정을 상속이라고 한다

 

 

DOM과 프로토타입

 

document.createElement('div')로 새로운 엘리먼트 생성 가능

이렇게 생성된 div 엘리먼트는 htmlDivElement라는 클래스와 인스턴스

 

div 앨리먼트의 상속 관계

 

EventTarget <- node <- Element <- HTMLElement <- HTMLDivElement

 

 

🧐 상속관계를 퀴즈로 알아보기

 

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

div.__proto__.__proto__ // 결과는 ?
div.__proto__.__proto__.__proto__ // 결과는 ?

 

answer : HTMLElement, Element