코드스테이츠 소프트웨어 엔지니어링 부트캠프 67, Prototype

Prototype

 

자바스크립트의 모든 객체는 자신의 부모 객체와 연결되어 있다. 그리고 모든 객체들은 Prototype Chain 으로 연결되어 있는데 종점은 Object.prototype 이다. prototype 객체는 constructor 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용된다.

let boy = {
    name : 'June',
      age : 27,
}
console.log(boy.hasOwnProperty('name'))//true

위의 코드에서 boy 객체는 hasOwnProperty라는 메소드가 없지만 동작한다.

 

그 이유는 boy의 prototype객체(부모객체)가 Object.prototype이기 때문이다.

 

prototype객체에는 __proto__로 접근할 수 있다.

 

 

함수가 정의될 때 발생하는 2가지 사건

 

1. 해당 함수에 constructor 부여
   constructor 자격을 부여 받아야 new 를 통해 객체를 만들 수 있다.
   -> 함수만 new 키워드를 이용할 수 있는 이유
2. 해당 함수의 prototype 객체 생성 및 연결
   함수를 정의하면 함수만 생성되는 것이 아니라, prototype 객체도 같이 생성된다.
   prototype 객체는 constructor와 __proto__ 를 갖고 있다.
   __proto__는 모든 객체가 빠짐없이 갖고 있는 prototype link 의 핵심이다. __proto__를 통해 prototype 객체에 접근할 수 있다.
   constructor는 인스턴스가 생성될 때 실행되어 초기화된 인스턴스에 속성을 넣어준다.

 

Prototype Link

 

__proto__ 는 객체가 생성될 때 조상이었던 함수의 prototype 객체를 참조한다.

 

 

 

Prototype Chain

 

let boy = {
    name : 'June',
      age : 27,
}
console.log(boy.hasOwnProperty('name'))//true

 

위의 코드에서 boy는 hasOwnProperty 메소드를 갖고 있지 않지만 오류가 나지 않았다.
그 이유는 아래 사진과 같이 boy 객체의 [[Prototype]] 이 가리키는 링크를 따라가 prototype 객체에 도달한 후 hasOwnProperty를 호출하였기 때문이다.

 

정리해보면

1. boy 객체가 hasOwnProperty 메소드를 갖고 있지 않았다.

 

1. prototype object를 탐색한다.(=부모객체로 거슬러 올라간다고 생각)

 

1. 없으면 그 prototype object의 prototype object를 탐색한다.

 

1. 계속 찾을때 까지 거슬러 올라간다. (위의 예에서는 바로 위의 prototype객체가 Object.prototype이었다.)

 

1. Object.prototype에 도달했음에도 찾지 못하면 undefined를 리턴한다.

 

 

이렇게 상위 프로토타입과 연결되어 상위 프로토타입의 프로퍼티나 메소드를 공유하는 연결형태를 prototype chain 이라고 한다.