prototype vs __proto__ vs constructor

 

출처 : 생활코딩

먼저 함수란 무엇인가 부터 알아보자

function Person(){}

 

자바스크립트에서 함수는 독특한 녀석이다.

함수에서 {} 안에는 statements 가 들어간다.

그런데 이건 동시에 객체(object)이기도 하다 ?!?!

 

그러니까 

var Person = new Function(); 이랑 똑같음

function 은 window에 기본으로 정의된 Function의 instance이다.

 

여기서 중요한 포인트는 자바스크립트에서 함수는 객체이기 때문에 property를 가질 수 있다!!

 

function Person(name, first, second){
	this.name = name;
    this.first = first;
    this.second = second;
}

만약, 이런 코드가 있다면?

Person 이라는 객체가 하나 생기고

Person.prototype 이라는 객체가 하나 더 생긴다.

 

왜?? Person 안에는 prototype 이라는 property가 생기고 그것이 바로 Person.prototype 이다.

Person.prototype 안에는 constructor 라는 property를 만들고 이 property는 Person을 가리킨다.

상호 참조하는 것이다.

 

그래서 이 때,

Person.prototype.sum = function () {}

을 하면

Person.prototype의 property에 sum 이라는 함수가 생긴다.

 

Person function은 constructor 이기 때문에 new operator을 쓸 수 있는데

let kim = new Person('kim', 10, 20);

을 했을 때,

kim 이라는 객체가 생성되고

그 안에는 name, first, second, 그리고! __proto__ 라는 property가 만들어진다.

이 때 __proto__는 무엇을 가리키냐면 바로

Person.prototype!!!

 

그러면 Person.prototype에 접근할 수 있는 방법이 2가지가 된다.

1. Person.prototype

2. kim.__proto__

 

지금까지 했던 이야기를 그림으로 그려보자면 바로 이 그림!

출처 : 생활코딩