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을 가리킨다.
'기술들 > javascript' 카테고리의 다른 글
[Today I Learned] 10월 28일(수) - 객체지향언어 (0) | 2020.10.28 |
---|---|
Twittler과제(2) - CSS (0) | 2020.09.07 |
Twittler과제(1) - HTML부분 (0) | 2020.08.28 |
[공부했던 것 정리] Scope(2) (0) | 2020.08.18 |
[공부했던 것 정리] Scope(1) (0) | 2020.08.11 |