[Javascript] Prototype

Prototype in JS

• JS는 프로토타입 기반 언어
• JS의 모든 객체는 자신을 생성한 객체 원형에 대한 연결을 가지며 이를 프로토타입이라고 한다
  ⇒ 즉, 어떠한 객체가 만들어지기 위해 “그 객체의 모태가 되는 것”
• JS의 모든 객체는 Object 객체의 프로토타입을 기반으로 확장되었다.
  ⇒ 최상위 프로토타입: Object 객체
• Prototype을 사용하여 JAVA 클래스(Class)의 ‘상속’을 비슷하게 흉내낼 수 있다.
  
  

사용 방법

• 사용 전

// 객체 생성을 위한 함수 선언
function Person() {
    this.eyes = 2;
    this.nose = 1;
}

// 객체 생성
const kim = new Person();
const park = new Person();


// 객체별로 2개의 프로퍼티를 가지므로 
// 총 4개(kim.eyes, kim.nose, park.eyes, park.nose)의 프로퍼티가 메모리에 할당된다.

console.log(kim.eyes); // 2
console.log(kim.nose); // 1

console.log(park.eyes); // 2
console.log(park.nose); // 1
코드를 입력하세요

• 사용 후

// 객체 생성을 위한 함수 선언
function Person() { }

// 프로토타입 사용
Person.prototype.eyes = 2;
Person.prototype.nose = 1;

// 객체 생성
const kim = new Person();
const park = new Person();

// Person 객체의 prototype에 있는 2개의 프로퍼티가 메모리에 할당된다.
// ⇒ Person.prototype 이라는 비어있는 Object가 있고 
//    Person 함수로부터 생성된 객체(kim, park)는 
//    그 Object의 프로퍼티를 가져와서 사용한다(공유)

console.log(kim.eyes); // 2

Prototype Object

• JS에서 객체를 생성하려면 함수를 정의해야한다.
• 함수를 정의하면
  1) 생성자(Constructor) 자격이 부여되고 (= new 를 사용하여 객체 생성 가능)
  2) 해당 함수의 Prototype Object가 생성 및 연결된다.
  (위의 예시에서 Other 는 함수로 선언한게 아니라서 생성자 자격이 없다. new로 객체를 생성하려하면 TypeError가 발생한다.)
• 정의된 함수의 prototype 프로퍼티를 통해 Prototype Object에 접근할 수 있다.
• Prototype Object는 일반적인 객체이고 기본으로 constructor와 __proto__ 프로퍼티를 갖는다.
  • constructor : 앞서 정의한 함수와 연결된다.
  • __proto__ : Prototype Link와 관련된 프로퍼티
    
  • [[Prototype]] ??
    : __proto__ 와 동일한 속성. ES6 부터 대부분 브라우저에서 구현되어 사실상의 표준으로 사용. (mdn 참고)
    
    

Prototype Link

• 생성된 객체(아래 예시에서 kim)의 함수 Prototype Object 에 대한 정보
• kim 객체에는 eyes 프로퍼티가 없지만 __proto__ 프로퍼티로 Person 함수의 Prototype Object에 접근하여 그 객체의 eyes 프로퍼티에 정의된 값을 가져온다.
  
  
  

Prototype chain

• 프로토타입을 상속해서 만들어진 객체들의 연관관계
• 어떤 객체의 특정 프로퍼티에 접근했을 때, 그 프로퍼티의 값을 찾지 못한다면 - __proto__ 를 사용하여 상위 객체의 프로퍼티를 탐색 한다.
  최상위 객체에 도달했을 때 해당 프로퍼티를 찾지 못했으면 undefined 를 반환한다.
  
  
  

Reference

• mdn web docs
• Javascript 프로토타입 이해하기
• Object prototype 이해하기