[JS] Prototype

책에 자주 등장하는 prototype 

 

 

현재 읽고있는 Deep Dive 뿐만아니라 여기저기서 prototype이라는 단어를 정말 많이 본다.

이 포스팅을 통해 prototype을 정복해보자!

 

 

---

 

prototpye의 정의

 

- 자바스크립트의 모든 객체는 자신의 "원형 (Prototpye)" 이 되는 객체를 갖는다

 

- 이를 프로토 타입이라한다.

 

- 보이지 않는 속성인 [[ Prototype ]] 이 자신의 프로토 타입 객체를 참조한다.

 

- __proto__ 라는 속성으로 참조할 수 있으나 비표준이고 , 구식이기에 사용하는것을 피하자. 

 

 

 

.prototype 과 [[prototype]]

 

- 모든 객체는 은닉 속성인 [[prototype]] 을 갖는다.

-  이때 특별히 함수객체는 접근할 수 있는 속성인 prototype을 갖는다.

 

( 관계를 명확하게  파악하자! )

 

[[prototype]]	자신의 프로토타입 객체를 참조하는 속성이다. (자신의 부모를 가리키는 참조 링크라고 보면 된다. )
.prototype	new 연산자로 자신의 생성자 함수로 사용한 경우, 그걸로 만들어진 새로운 객체의 [[prototype]] 이 참조하는 값

 

 

 

[ 예제 ]

 

function Func() {}; 

var a = new Func (); //새로운 객체 a 생성

 

 

 

 

-  new 연산자로 객체 a를 생성하면 a의 프로토타입 객체는 Func.prototype이다.

 

-  constructor 란 모든 .prototype 객체의 속성에 있는것으로 실제 객체를 참조한다.

 

-  Func.prototype는 constructor 속성을 갖는다. ( 이는 실제 객체 Func을 가리킴)

 

-  Func.prototype 또한 객체이므로 [[ prototype ]] 을 갖고, 이는 모든 객체의 원형이 되는 Object.prototype을 가리킨다.

 

 

 

 

 

prototype chaining

  - 어떤 객체의 프로퍼티를 참조하거나 , 값을 할당할 때 해당 객체에 프로퍼티가 없다면?

 

 ▷ 그 객체의 프로토타입 객체를 연쇄적으로 보며 프로퍼티를 찾는 방식을 뜻한다.

 

 

1. 프로퍼티 참조시

 

- 찾고자 하는 프로퍼티가 객체에 존재하면 사용

 

- 없으면 [[prototype]] 링크를 타고 끝까지 올라가며 해당 프로퍼티를 찾음

 

-  찾았는데도 없으면 undefined 반환

 

 

2. 프로퍼티 할당시

 

- 찾고자 하는 프로퍼티가 객체에 존재하면 값을 바꿈

 

- 프로퍼티가 없고 [[prototype]]링크를 타고 올라가서 해당 프로퍼티를 찾는다면

 

1) 그 프로퍼티가 변경가능한 값이라면 새로운 프로퍼티를 할당하여 상위 프로퍼티가 가려진다.

 

2) 그 프로퍼티가 변경불가능한 값이라면 비엄격모드에선 무시 , 엄격모드에선 에러가 발생한다.

 

3) 그 프로퍼티가 setter일 경우 이 setter가 호출되고 가려지지 않는다.

 

 

 

[가려짐 예시]

function Func() {}
Func.prototype.num = 20;
var a = new Func();
a.num = 10;
console.log(a.num); // 10

 

a객체의 프로토타입 객체인 Func.prototype.num = 20 이지만 a.num =10 에 의해 가려짐 현상이 발생되어 10을 출력하고 있다.