들어가며..

• JavaScript는 ES6 버전 이전까지 클래스라는 개념이 없었습니다.

  • 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 (원형)객체와 연결되어 있습니다.
  • 이러한 부모 객체를 프로토타입, 프로토타입 객체라고 부릅니다.
    • 이는 객체 지향의 상속 개념과 유사하게, 부모 객체의 프로퍼티와 메소드를 사용할 수 있게 합니다.
    • 즉, 프로토타입 객체는 생성자 함수로 생성된 각 객체에 공유 프로퍼티를 제공하기 위해 사용합니다.
    • 객체의 특성을 다른 객체로 상속하는 것을 가능하게 하는 메커니즘이라고 정리할 수 있겠네요.

• 모든 객체는 자신의 프로토타입 객체(부모)를 가리키는 [[Prototype]] 인터널 슬롯을 가집니다.

  • 자바스크립트의 모든 객체는 **[[Prototype]]**이라는 **인터널 슬롯 객체(내부 프로퍼티)**를 가집니다.
  • [[Prototype]]의 값은 자신에게 연결된 상속을 구현하는 프로토타입 객체를 가리킵니다.
    • 이 때, [[Prototype]]내부 슬롯에는 직접 접근이 불가합니다. 이는 프로토타입 체인의 단방향을 지키기 위해서입니다.

• 그렇다면 객체의 부모 역할을 하는 원형 객체인, 프로토타입 객체에는 어떻게 접근할 수 있을까요?

  • 객체가 가지는 인터널 슬롯 객체(내부 프로퍼티)인 [[Prototype]]가 가리키는 프로토타입 객체에는 proto 로 접근할 수 있습니다.

  • proto 사용 시, 특정 객체를 생성한 부모 객체인 프로토타입 객체를 가리킬 수 있습니다.

    

[[Prototype]]과 prototype

• prototype 프로퍼티와 **[[Prototype]]**은 모두 프로토타입 객체를 가리킵니다.
  • **[[Prototype]]**은 함수 뿐 아니라, 모든 객체가 갖는 인터널 슬롯입니다.
  • prototype 프로퍼티는 클래스, 함수 등의 객체만 가지는 프로퍼티입니다. (왼쪽 이미지 참고)

1. [[Prototype]]

   

   • **[[Prototype]]**은 객체 입장에서, 자신의 부모 역할을 하는 프로토타입 객체(= .prototype)를 가리키는 인터널 슬롯입니다.

   

   • proto 를 사용하여, 자신의 부모 객체인 프로토타입 객체(=.prototype)에 접근할 수 있습니다.
   • 위의 예제에서, 식별자 a는 Object type를 물려받았으므로, **a.proto**로, Object의 prototype 프로퍼티에 접근할 수 있습니다.

• 함수 객체의 입장에서는, **Function.prototype**을 가리킵니다.

  • 일반적인 객체의 **proto**는 Object.prototype을 가리킵니다.
  • 하지만, 함수의 **proto**는 Function.prototype을 가리킵니다.

  

  ---

  

  ---

1. prototype 프로퍼티

• 일반 객체가 아니라, 함수 객체만 가지는 프로퍼티입니다.

• 함수 객체가 생성자로 사용될 때, 이 함수를 통해 생성될 객체의 부모 역할을 하는 객체(프로토타입 객체)를 가리킵니다.

  • 쉽게 말해, 함수 객체가 생성자로 사용되어 만들어진 인스턴스의 __proto__가 가리키는 대상이 바로, 함수 객체만 가지는 prototype 프로퍼티입니다.

  

  1. 해당예제에서는, Box 함수 객체가 생성자로 사용되고, displayProperty라는 새로운 객체가 생성되었습니다.
  2. displayProperty의 __proto__는 생성에 사용된 함수 객체의 prototype 프로퍼티를 가리킵니다.