프로토타입
JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다.
JavaScript에서는 객체 인스턴스와 프로토타입 간에 연결(많은 브라우저들이 생성자의 prototype 속성에서 파생된 __proto__ 속성으로 객체 인스턴스에 구현하고 있습니다.)이 구성되며 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메소드를 탐색합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class Human {
constructor(name, age) {
this.name = name;
this.age = age;
}
sleep() {
console.log(`${this.name}은 잠에 들었습니다`);
}
}
let kimcoding = new Human("김코딩", 30);
Human.prototype.wakeup = function () {
// prototype으로 class에 메서드 추가 가능
console.log(`${this.name}은 잠에서 깨었습니다`);
};
console.log(kimcoding.wakeup()); // 김코딩은 잠에서 깨었습니다.
kimcoding.__proto__.work = function () {
//생성된 객체에서 class에 접근할때는 __proto__
console.log(`${this.name}은 일을 시작합니다.`);
};
console.log(kimcoding.work()); //김코딩은 일을 시작합니다.
Human.prototype.constructor === Human; //true
Human.prototype === kimcoding.__proto__; //true
Human.prototype.sleep === kimcoding.sleep; //true
쉽게 말해 Human.prototype에 접근하기위해 .prototype은 위에서 아래로 내려오면서 탐색하고 .__proto__는 아래에서 위로 올라가며 탐색한다고 생각하면 된다.
