프로토타입 체이닝 (prototype chaining)

이전 게시물인 "프로토타입 디렉터리 구조"를 좀더 살펴보자면

 

Object 객체의 디렉터리 구조는 아래와 같다.

Object,prototype

 

배열 리터럴의 디렉터리 구조도 다시 살펴보면

__proto__안에 또다시 __proto__가 등장하는데 Object.prototype과 동일한 내용인 것을 볼 수 있다!

Array.prototype

> 이유는?

prototype 객체가 "객체"이기 때문이다.

결국 모든 객체의 __proto__에는 Object.prototype이 연결된다고 볼 수 있다.

 

배열 리터럴 기준으로 __proto__는 언제나 생략 가능하기 때문에

Array.prototype 내부의 메서드를 자신의 것처럼 실행할 수 있었듯이,

Object.prototype 내부의 메서드 또한 자신의 것처럼 실행할 수 있다는 것이다!

 

생략가능한 __proto__를 한번 더 따라가면 Object.prototype를 참조할 수 있기 때문!

let arr = ['a', 'b'];

/* Array.prototype 내부의 메서드를 자신의 것처럼 실행 */
arr(.__proto__).push('c');

/* Object.prototype 내부의 메서드 또한 자신의 것처럼 실행 */
arr(.__proto__)(.__proto__).hasOwnProperty('b');

> 프로토타입 체인이란?

__proto__ 프로퍼티 내부에 또다시 __proto_ 프로퍼티가 "연쇄적으로" 이어진 것을 뜻한다.

프로토타입 체이닝을 스코프 체이닝과 비슷한 맥락으로 생각해도 된다.

 

"가까운 자신의 프로퍼티를 먼저 검색  ->  없으면 상위 __proto__ 검색  ->  없으면 다시 상위 __proto__ 검색"

> For example

맨위의 사진들을 살펴보면 toString 메서드는 Array.prototype과 Object.prototype 둘다 가지고 있다.

둘 중 어느곳에 먼저 체이닝이 되는지 예시를 들어보았다.

let arr = ['a', 'b'];

Array.prototype.toString.call(arr);  // "a,b"
Object.prototype.toString.call(arr); // "[object Array]"

/* 프로토타입 체이닝의 결과 */
arr.toString();                      // "a,b"  ⭐️

⭐️ 프로토타입 체이닝의 결과 arr은 가까운 자신의 프로퍼티를 먼저 검색하여 Array.prototype을 적용한 것을 볼 수 있다!

> 정리

변수 arr은 배열이므로 arr.__proto__는 Array.prototype을 참조하고

 

Array.prototype은 객체이므로 Array.prototype.__proto__는 Object.prototype을 참조한다.

 

결국 arr은 Array.prototype과 Object.prototype의 프로퍼티를 모두 사용할 수 있다 👍👍