프로토타입 체인

Jeris·2023년 4월 13일

JavaScript daily mission

코드잇 부트캠프 0기

목록 보기

30/107

프로토타입이란

프로토타입(Prototype)이란 단어는 원형이라는 의미를 가지고 있다. 자바스크립트에서 프로토타입은 객체의 원형이라 할 수 있다.
모든 객체들은 메소드와 속성들을 상속 받기 위해 프로토타입 객체를 가진다.
주어진 객체의 모든 속성을 콘솔에서 볼 수 있는 console.dir() 메소드를 활용하면, [[Prototype]] 이라는 숨어있는 속성을 확인할 수 있다.
[[Prototype]] 은 해당 객체의 입장에서 자신의 부모 역할을 하는 객체를 가리킨다.

`[[Prototype]]` , `.proto` , `.prototype` 알아보기

[[Prototype]] 개발자가 직접 접근이 불가하고 간접적으로 접근할 수 있는 내부 슬롯(internal slot)
- internal slot 자바스크립트 엔진의 구현된 내용을 설명하기 위한 pseudo 프로퍼티
- 직접 접근을 불가하게 해서 프로토타입 체인의 방향을 자식에서 부모를 탐색하는 단방향으로 지키고, 실수로 순환참조하는 일이 없도록 한다.
```
function Person(name) {
    this.name = name;
}

console.dir(Person);
```
__proto__ 객체의 프로토타입([[Prototype]])을 접근하기 위한 프로퍼티
- 이를 통해 자신의 프로토타입에 접근할 수 있다.
- Object.getPrototypeOf() 와 동일한 기능을 수행한다.
```
function Person(name) {
    this.name = name;
}

console.log(Person.__proto__ === Object.getPrototypeOf(Person)); // true    
```
prototype 생성자 함수로 호출할 수 있는 객체, 즉 constructor 를 소유하는 프로퍼티
- Person() 생성자 함수로 foo 를 만들었다면, foo 객체를 생성한 객체는 Person() 생성자 함수이므로, foo 객체의 프로토타입 객체는 Person() 의 생성자 함수, Person.prototype이다
- 일반 객체와 생성자 함수로 호출할 수 없는 arrow function은 prototype 프로퍼티가 없다.
```
function Person(name) {
	this.name = name;
}

const foo = new Person('코드잇');

console.log(foo.__proto__ === Person.prototype); // true
console.log(Person.prototype) // {constructor: f}
```

프로토타입 체인(Prototype Chain)

자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근하려고 할 때 해당 객체에 접근하려는 프로퍼티나 메소드가 없다면 프로토타입([[Prototype]])이 가리키는 링크를 따라 자신의 부모 역할을 하는 프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색한다.
프로토타입 링크를 따라 계속해서 상위 프로토타입을 검색할 수 있고, 이러한 프로토타입 간의 연결을 프로토타입 체인이라고 한다.

프로토타입을 계속해서 타고가면 자바스크립트의 모든 객체는 Object.prototype 에 최종 도착한다.

function Person(name) {
    this.name = name;
}

const foo = new Person('코드잇');
const string = 'abc';
const number = 123;
const array = [1,2,3];
const arrowFunction = () => 'arrowFunction';
const object = {a: 'abc'};

console.log(foo.__proto__ === Person.prototype); // true
console.log(string.__proto__ === String.prototype); // true
console.log(number.__proto__ === Number.prototype); // true
console.log(array.__proto__ === Array.prototype); // true
console.log(arrowFunction.__proto__ === Function.prototype); // true

console.log(foo.__proto__.__proto__ === Object.prototype); // true
console.log(string.__proto__.__proto__ === Object.prototype); // true
console.log(number.__proto__.__proto__ === Object.prototype); // true
console.log(array.__proto__.__proto__ === Object.prototype); // true
console.log(arrowFunction.__proto__.__proto__ === Object.prototype); // true
console.log(object.__proto__ === Object.prototype); // true