상속 관점에서 자바스크립트의 유일한 생성자는 객체뿐이며 각각의 객체는 [[prototype]]라는 은닉(private) 속성을 가지는데 자신의 프로토타입이 되는 객체를 가리킨다. 그 객체의 프로토타입 또한 프로토타입을 가지고 있고 이것이 반복되다 결국 null 을 프로토타입으로 가지는 오브젝트에서 끝나는데 이러한 프로토타입적 상속 모델이 프로토타입 체인이다.
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__
이와 같은 예시는 프로토타입 체인을 나타낸다.
모든 클래스의 조상이며 인스턴스의 *proto 를 이용하면 부모클래스의 프로토타입, 혹은 ‘부모의 부모클래스’의 프로토타입을 탐색할 수 있다.
JavaScrtipt 에서 상속을 구현할때는 프로토 타입 체인을 사용한다. 학생과 사람이라는 클래스가 존재한다고 가정할때 클래스 사람의 메서드와 속성을 객체로 구현한다면 다음과 같다.
let kimcoding = new Human('김코딩', 30);
// 속성
kimcoding.age;
kimcoding.gender;
// 메서드
kimcoding.eat();
kimcoding.sleep();
학생은 학생이기 전에 사람이므로 사람의 기본적인 메서드를 상속받을 수 있다. 또한 학생은 추가적인 특징도 필요하다.
let parkhacker = new Student('박해커', 22);
// 속성
parkhacker.grade;
// 메서드
parkhacker.learn();
위 예시에서 학생은 사람의 sleep(), eat()라는 메서드를 사용할 수 있다. 학생은 사람의 특징을 그대로 상속받아 물려받기 때문이다.