prototype?
프로토타입? 우리나라 말로 번역하면 원형 "원래의 형태" 라고 할 수 있다.
자바 스크립트는 프로토타입을 기반으로 상속이라는 개념을 제공하고 있다.
예시
function Ultra(){}
Ultra.prototype.ultraProp = true;
function Super(){}
Super.prototype = new Ultra();
function Sub(){}
Sub.prototype = new Super();
let o = new Sub();
console.log(o.ultraProp);예시 코드의 결과는 true 이다
함수는 객체이다.
따라서, 생성자로 사용되는 함수 또한 객체이며, 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티이다.
prototype에 저장된 속성들은 생성자를 통해 객체가 만들어질 때 그 객체에 저장된 속성들이 연결된다.
생성자 Sub를 통해서 만들어진 객체 o가 Ultra의 프로퍼티 ultraProp에 접근 가능한 것은 prototype 체인으로 Sub와 Ultra가 연결되어 있기 때문이다. 내부적으로는 아래와 같은 일이 일어난다.
객체 o에서 ultraProp를 찾는다.
없다면 Sub.prototype.ultraProp를 찾는다.
없다면 Super.prototype.ultraProp를 찾는다.
없다면 Ultra.prototype.ultraProp를 찾는다.
따라서, o 라는 변수에 super의 자식인 sub을 선언하였고, console.log를 통해 o 라는 변수에서 ultaraProp를 찾기 시작할 것이다.
하지만, sub에서는 선언된 적이 없으므로 그 위에 부모인 super에서 찾고, super 에서 또한 선언된 적이 없어 그 위에 부모인 ultra 에서 찾게 되는데 ultra에서 ultraProp는 true의 값이 주어졌기 때문에 new 생성자를 통해 만들어진 객체들에는 부모에게 지정된 속성들이 연결되어 있기 때문으로 변수 o의 ultraProp의 값은 true가 될 수 있다.
prototype는 객체와 객체를 연결하는 체인의 역할을 하는 것이다. 이러한 관계를 prototype chain이라고 한다.
prototype chain?
위에서 부터 차례대로
Human: class
human.prototype: prototype
steve: instance
이미지를 코드로 정의하면 아래와 같다.
class Human {
constructor(name, age) {
this.name = name;
this.age = age;
}
sleep() {
console.log(`${this.name}은 잠에 들었습니다`);
}
}
let kimcoding = new Human('김코딩', 30);
Human.prototype.constructor === Human; // true, class
Human.prototype === steve.__proto__; // true, prototype
Human.prototype.sleep === steve.sleep // true, instance
console.log(Human.prototype);
➡️ {constructor: class Human, ƒ sleep: sleep()}
steve.__proto__; // 스티브의 프로토타입
steve.__proto__.__proto__; // 스티브의 프로토타입의 프로토타입
- 맨 아래의 인스턴스의 proto를 이용하면 이를 더 확실하게 확인할 수 있습니다. proto를 이용하면 부모 클래스의 프로토타입, 혹은 '부모의 부모 클래스'의 프로토타입을 탐색할 수 있습니다.
이러한 방식으로 링크에 링크, 타고 타고 올라가는 방식을 프로토타입 체인이라고 한다.
