프로토타입 체인:
JavaScript는 프로토타입 기반의 언어이며,
프로토타입에 기반하여 객체지향 프로그래밍을 지원.
JavaScript의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어있다.
부모 객체를 프로토타입 객체 또는 프로토타입이라고 한다.
.prototype:
함수 객체만 가지고 있는 property.
같은 생성자로부터 만들어진 객체들은 모두 원형 객체를 공유.
함수 객체가 생성자로 사용될 때
이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(prototype 객체)를 가리킨다.
prototype객체란 어떠한 객체가 만들어지기 위해
그 객체의 모태가 되는 객체이고 하위 객체들에게 물려줄 속성들이다.
let kimcoding = new Human('김코딩', 30);
// 속성
kimcoding.age;
kimcoding.gender;
// 메서드
kimcoding.eat();
kimcoding.sleep();let parkhacker = new Student('박해커', 22);
// 속성
parkhacker.grade;
// 메서드
parkhacker.learn();
직접 생성한 프로토타입은 위와 같이 새로운 property나 method를 마음껏 추가하거나 삭제할 수 있다.
자바스크립트 표준 객체의 프로토타입도 임의 수정 가능하나 심각한 오류가 발생할 수 있다.
따라서 자바스크립트의 표준 객체의 프로토타입은 수정하면 안된다.
.__proto__:
함수를 포함한 모든 객체가 갖고 있는 인터널 슬롯.
객체의 입장에서 자신의 부모역할을 하는 property객체를 가리킨다.
FuncEx.prototype === {constructor: {}, __proto__: {}}
// 프로토타입 객체와 매핑된 함수
FuncEx.prototype.constructor === function FuncEx(){ this.name = 'jaen' }
FuncEx (함수객체 :: prototype 속성) <-> FuncEx.prototype (prototype 객체 :: constructor 속성)prototype 프로퍼티는 함수의 입장에서 자신과 링크된 자식에게 물려줄 프로토타입 객체를 가리키고 proto 프로퍼티는 객체의 입장에서 자신의 부모 객체인 프로토타입 객체를 내부의 숨겨진 링크로 가지고 있는 것이다.
DOM과 프로토타입:
브라우저에서 DOM을 이용하면, document.createElement('div')로 새로운 div 엘리먼트를 만들 수 있다.생성된 div 엘리먼트는, HTMLDivElement라는 클래스의 인스턴스.
DOM 엘리먼트는 예를 들어 innerHTML과 같은 속성, 또는 append()와 같은 메서드가 있다. 각각의 엘리먼트가 해당 메서드나 속성이 있다는 것을 통해, Element라는 공통의 부모가 있음을 알 수 있다.
화살표 방향은 부모를 가리킨다.
EventTarget의 부모로는 모든 클래스의 조상인 Object가 존재,
인스턴스의 __proto__를 이용하면 이를 더 확실하게 확인할 수 있다.
__proto__를 이용하면 부모 클래스의 프로토타입, 혹은 '부모의 부모 클래스'의 프로토타입을 탐색할 수 있다.
