자바스크립트 정리하며 배우기[18] - 함수의 프로토타입(prototype property)과 constructor

안녕하세요. Tay 입니다.

함수의 프로토타입과 프로토타입의 컨스트럭쳐를 알아보겠습니다.

 

함수의 프로토타입 - prototype property

모든 함수는 객체로서 prototype 을 가지고 있다.

 

- add function

console

구글 콘솔 창에 add function 을 바로 생성하고, dir 을 통해서 add 의 구조를 살펴보자.

 

add dir

add 함수에는 여러 기본 프로퍼티와 prototype 프로퍼티,

모든 객체의 부모를 나타내는 내부 프로퍼티  prototype(__proto__) 가 있다.

 

함수의 prototype 과 __proto__ 는 다르다.

 

그 차이를 알아보자.

 

함수의 prototype 프로퍼티 와 constructor

fucntion prototype

함수의 프로토타입은 constructor 를 갖고있다.

 

그렇다면 이 constructor 는 무엇일까? add.prototype을 로그로 찍어봤다.

 

add.prototype.constructor

위 사진은 constructor 내부의 프로퍼티 목록이다.

무언가 짐작이 가는 내용이 있는가?

 

function add	add.prototype.constructor	add.prototype.constructor.prototype.constructor

 

add 함수와 각 constructor 들의 모습이 같다!

 

• 함수의 프로토타입은 constructor 를 갖고있다.
• 프로토타입의 constructor 는 자신과 연결된 함수를 가리킨다.

즉, 함수의 프로토타입과 프로토타입의 constructor 는 서로를 참조한다.

※ 함수 -> prototype , prototype.constructor -> 함수 ※

 

중요!!

함수의 prototype 프로퍼티 와 모든 객체 내부 prototype 프로퍼티는 다르다!

즉, prototype 과 __proto__ 는 다르다.

 

 

fnc person , obj kim

생성자 함수 person 과 kim 객체를 생성했다.

 

각각 dir 로 로그를 확인해보자.

 

생성자 함수 person dir	객체 kim dir

1. 함수의 prototype 과 __proto__

• 함수의 prototype 프로퍼티는 자신과 링크된 프로토타입 객체이다.
• 함수의 __proto__ 는 자신의 부모 객체를 참조하는 프로토타입 객체이다.

2. 객체의 __proto__

• kim 객체의 __proto__ 는 자신의 부모 역할인 생성자 함수의 프로토타입을 참조한다.
• __proto__ 의  유일한 프로퍼티 constructor 는 자신과 연결된 함수를 가리킨다.

중요!!! 생성자 함수의 프로토타입 과 kim 객체의 프로토타입은 같은 프로토타입 객체를 참조

 

 

이 글은 개인 공부목적으로 작성되었습니다.

정보가 잘못 되거나 궁금한 사항은 댓글로 부탁드립니다!! 읽어주셔서 감사합니다.