프로토타입과 클래스

프로토타입

자바스크립트에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다.

모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미

.prototype

모든 객체는 프로토타입의 계층 구조인 프로토타입 체인에 묶여 있다.

자바스크립트 엔진은 객체의 프로퍼티에 접근하려고 할 때 객체에 접근하려는 프로퍼티가 없다면 __proto __ 접근자 프로퍼티가 가리키는 참조를 따라 자신의 부모 역활을 하는 프로토타입의 프로퍼티를 순차적으로 검색한다.

프로토타입 체인의 종점, 즉 프로포타입 체인의 최상위 객체는 Object.prototype이며, 이 객체의 프로퍼티와 메서드는 모든 객체에 상속된다.

__proto __

모든 객체는 __proto __ 접근자 프로퍼티를 통해 자신의 프로토타입, 즉 [[Prototype]] 내부 슬롯에 간접적으로 접근할 수 있다.

1. __proto __는 접근자 프로퍼티다.

2. __proto __접근자 프로퍼티는 상속을 통해 사용된다.

3. __proto __접근자 프로퍼티를 통해 프로토타입에 접근하는 이유

• [[Prototype]] 내부 슬롯의 값, 즉 포로토타입에 접근하기 위해 접근자 프로퍼티를 사용하는 이유는 상호 참조에 의해 프로토타입 체인이 생성되는 것을 방지하기 위해서다.

4. __proto __접근자 프로퍼티를 코드 내에서 직접 사용하는 것은 권장하지 않는다.

클래스, 인스턴스, 프로토타입의 관계

class Human {
	constructor(name) {
    	this.name = name;
    }
  	sleep() { console.log(`${this.name} is sleeping.`) }
}

let steve = new Human('steve');

Human.prototype.constructor === Human; // true, 클래스
Human.prototype === steve.__proto__; // true, 프로토타입
Human.prototype.sleep === steve.sleep // true, 인스턴스 - 메서드

console.log(Human.prototype);
// {constructor: class Human, ƒ sleep: sleep()}

steve.__proto__; // 스티브의 프로토타입
steve.__proto__.__proto__; // 스티브의 프로토타입의 프로토타입