프로토타입 (Prototype)
자바스크립트는 프로토타입 기반의 언어이다. 그러므로 자바스크립트의 동작을 이해하기 위해서는 프로토타입에 대한 이해가 필요할 것이다.
자바스크립트에서 객체는 자신의 부모 역할 객체와 연결되어 있다. 이 말은 자식 객체가 부모 객체의 프로퍼티 또는 메소드를 상속받는다는 것을 의미한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 한다.
프로토타입은 constructor(생성자 함수)로 만들어진 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다.
*이해를 위한 예시
//클래스 정의
class Human {
constructor(name,age) { //생성자함수
this.name = name ;
this.age = age ;
}
sleep () {
console.log (`${this.name}은 잠에 들었습니다.`) ;
}
}
let mun = new Human ('문재웅',27) //인스턴스 정의
Human.prototype.constructor === Human; // true
Human.prototype === mun.__proto__; // true
Human.prototype.sleep === mun.sleep ; // true
mun.sleep() ; // 문재웅은 잠에 들었습니다.프로토타입 체인
프로토타입 객체(A)는 상위 프로토타입 객체(B)로부터 속성과 메소드를 상속 받을 수 있으며, B객체는 그 상위 프로토타입 객체(C)로부터 속성과 메소드를 상속 받을 수 있다. (...) 이렇게 계속 상속이 이어지는 형태가 마치 체인과 같아서 이러한 형태를 프로토타입 체인이라 한다.
- 이 때, B객체를 A객체의 부모, A객체는 자식 클래스라 한다.
- extends를 이용하여 상속받은 클래스 명시
- super를 이용하여 부모 클래스의 함수를 호출 (this키워드가 나오기 전에 사용해야함)
부모클래스.prototype === 자식클래스.__proto__DOM과 프로토타입
document.createElement('div')로 새로운 div 엘리먼트 생성이 가능하다.
이렇게 생성된 div 엘리먼트는 HTMLDivElement라는 클래스의 인스턴스이다.
let div = document.createElement('div');
console.log(div.__proto__) // HTMLDivElement
console.log(div.__proto__.__proto__) // HTMLelement
console.log(div.__proto__.__proto__.__proto__) // Element
console.log(div.__proto__.__proto__.__proto__.__proto__) // Node
console.log(div.__proto__.__proto__.__proto__.__proto__.__proto__) // EventTarget
console.log(div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__) // Object
console.log(div.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__) // undefined- div엘리먼트의 상속
-Object > EventTarget > Node > Element > HTMLelement > HTMLDivElement > div
Human이라는 클래스와 인스턴스, 그리고 프로토타입의 관계
source : https://poiemaweb.com/js-prototype
source : 코드스테이츠 교육 자료
*아직은 기본적인 개념만 어느정도 아는 정도라, 더 자세한 부분은 추가 학습을 통해 내용 추가 필요
