본문 바로가기
JavaScript

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

by whoyoung90 2022. 6. 4.
반응형

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

 

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의 프로퍼티를 모두 사용할 수 있다 👍👍

 

반응형

댓글