[javascript] 프로토타입 체이닝이란?

결론

프로토타입 체이닝이란,

자신에게서 먼저 프로퍼티를 찾고 없으면, [[prototype]]링크가 가리키는 객체에서 찾는 것을 말한다.

[[prototype]]링크가 가리키는 객체에도 없으면 그 객체의 [[prototype]]링크가 가리키는 객체에서 찾는 것을 반복하기 때문에 체이닝이라는 표현을 쓴다.

 

 

javascript는 프로토타입 체이닝을 통해 부모의 메소드와 속성에 접근 할 수 있도록 한다.

 

const obj = {
	a : "",
	b : ""
};

if(obj.hasOwnProperty("c")){
	obj.c = "c";
}

console.log(obj); // obj에는 c라는 속성이 없으므로 obj는 바뀌지 않는다.

 

이 코드는 obj라는 객체에 있는 hasOwnProperty라는 메소드에 접근해서 obj안에 c라는 프로퍼티가 있는지 확인한다.

그러나 obj에는 c라는 프로퍼티가 없기 때문에 console.log로 찍어보면

이전의 obj가 그대로 찍힌다.

 

그런데 obj에는 hasOwnProperty라는 프로퍼티가 없었는데 어떻게 오류가 나지 않은걸까?

 

obj를 console.log로 찍어보자.

a, c외에도 [[prototype]]이라는 애가 있다. 열어보자.

 

열어보니 여기에 hasOwnProperty라는 메소드가 보인다.

바로 저 객체에 접근한 것이다.

이게 어떻게 가능할까?

 

javascript는 [[prototype]]링크를 통해 부모의 prototype에 연결한다.

obj의 부모는 Object이므로 Object.prototype이 가리키는 객체에 [[prototype]]링크로 연결되어있는 것이다.

자세한 것은 아래를 참고하자.

https://wouldyou.tistory.com/29

[javascript] prototype과 [[prototype]]의 차이, implicit prototype link

 

obj.hasOwnProperty라고 하면 먼저 obj안에서 hasOwnProperty를 찾는다.

그런데 obj에서 찾지 못하면 [[prototype]]링크가 가리키는 객체에서 hasOwnProperty를 찾는다.

만약 여기에서 또 찾지 못하면 다시 [[prototype]]링크가 가리키는 객체에서 hasOwnProperty를 찾는다.

 

예를 들어서 Person이라는 클래스가 있고 wouldyou = new Person을 통해 wouldyou라는 객체를 생성했다면,

wouldyou는 Person을 상속받고, Person은 최상위 객체인 Object를 상속받는 아래와 같은 그림이 된다.

여기서 wouldyou는 [[prototype]]링크를 통해 eat(), sleep(), study()뿐만 아니라 hasOwnProperty도 사용할 수 있다.

 

이렇게 [[prototype]]링크를 반복해서 타고 메소드와 프로퍼티를 검색하는 것을 프로토타입 체이닝이라고 한다.