본문 바로가기

기술들/javascript

객체지향언어 - prototype과 __proto__의 관계

protoype과 __proto__를 공부하고 있던 참에 코드스테이츠 엔지니어 분께서 좋은 글을 추천해주셨고 이를 보고 이 개념에 대해 어느 정도 이해하게 되었다. 까먹을새라 내가 이해한데로 나만의 언어로 정리해보고자 한다. 

 

 

먼저 Food라는 함수를 하나 생성해보자. 

function Food() { }

함수를 생성하면 prototype이라는 것이 자동적으로 생성이된다. (이것은 진리

그 prototype이라는 것에 접근하면 객체형태가 반환되는데, 이는 prototype이 객체라는 것을 의미한다. 

Food.prototype
=> {constructor: ƒ} //객체가 반환됨.

그 prototype 객체를 까보면  constructor라는 속성과 __proto__라는 속성이 있다. 

아래에 보이는 것처럼 constructor는 아까 처음에 선언한 function Food() {}를 가리키고 있고 

__proto__라는 속성은 최상위 객체인 Object를 표시하고 있다.(Food.prototype.__proto__ ==> 최상위 객체를 가리킴)

{constructor: ƒ} //prototype
//까보면
constructor: ƒ Food() 
__proto__: Object

__proto__ 가 Object를 가리키고 있다는 말은 최상위 객체인 Object를 상속하고 있다는 의미이다.

 

그럼 Food라는 함수가 Object의 여러 메소드들(내가 알고 있는 객체의 메소드는 hasOwnProperty뿐..)을 사용할 수 있다는 말인데, 이는 다음과 같이 new키워드로 Food의 instance를 생성하면 사용할 수 있다. 

let pasta = new Food(); //pasta : Food의 instance

//호출하면
pasta;
=> Food {} // 빈 객체 형태가 반환됨.

//pasta는 객체이다.
//즉 정리하면, pasta는 객체이자 Food의 instance이다. 

//그렇기 때문에 아래와 같이 객체의 메소드를 사용할 수 있다. 
pasta.hasOwnProperty();
pasta.valueOf(); 

 

여기서의 또 하나의 진리가 있는데 모든 객체는 __proto__라는 속성을 내장하고 있다는 것이다. 

pasta라는 객체 안을 확인해 보면 역시 __proto__가 있고 최상위객체인 Object를 가리키고 있고,

그 __proto__를 확인해보면 pasta를 생성할 때 사용한 Food라는 함수의 prototype과 같다는 것을 알 수 있다.

pasta;
=> {} //안을 열어보면
__proto__: Object

//__proto__를 까보면 
pasta.__proto__;
constructor: ƒ Food()
__proto__: Object
-----------------------
Food.prototype;
constructor: ƒ Food() 
__proto__: Object

//!!결론!!
pasta.__proto__ === Food.prototype; //true

 

여기서 정리해보면 

선언한 함수(Food)의 prototype의 __proto__ 는 최상위 객체 Object의 prototype을 가리키고,

Food.prototype.__proto__ ==> 최상위 객체의 prototype을 가리킴.

 

선언한 함수(Food)로 생성한 instance(pasta)의 __proto__는 Food.prototype을 가리키고 있다.

pasta.__proto__ =>  Food.prototype을 가리킴. 

 

이를 그림으로 나타내면 

이러한 관계를 나타낸다. 

즉, __proto__는 상위 함수와 연결해주는 연결(chain) 역할을 한다.

 

요약하자면!

1. 함수 생성시 내장객체로 prototype이라는 객체가 생성된다. 그 구성요소는 constructor와 __proto__

2. constructor는 자기자신(생성한 함수)을 가리킨다. 

3. __proto__는 모든 객체안에 들어가 있는 속성이고 상위함수의 prototype을 가리킨다.