[JS] 프로토타입(prototype)

참고

Object prototypes - Web 개발 학습하기 | MDN

• JS에서는 객체 상속을 위해 프로토타입 방식을 사용한다.
• JS는 흔히 Prototype-based language라고 하며, 이는 곧 모든 객체들이 메소드와 속성들을 상속받기 위한 템플릿 역할을 맡는 'prototype object'를 갖는다는 의미가 된다.
• Prototype은 자신 또한 프로토타입을 두어 해당 프로토타입의 메소드와 속성을 상속받을 수도 있으며, 이러한 연결 관계를 prototype chain이라고 한다.
  • 상속되는 속성과 메소드는 각 객체가 아닌 객체 생성자의 'prototype' 속성에 정의된다.
• JS는 객체 인스턴스와 프로토타입 간에 연결이 구성되어 있으며, 이 연결을 따라 프로토타입 체인을 타고 올라가며 속성과 메소드를 탐색한다.

function Injuk(name, age) {
  this.name = name;
  this.age = age;
  this.barf = function() {
    console.log('bow wow');
  }
}

let injuk = new Injuk("injuk", 3)
injuk.barf();
console.log(injuk.__proto__);
console.log(injuk.__proto__.__proto__);
injuk.toString();

/* 실행 결과
bow wow
Injuk {}
{}
*/

• injuk 변수는 Injuk를 prototype으로 갖고, Injuk는 다시 Object를 prototype으로 갖는다.
• injuk.toString은 prototype chaining에 따라 injuk에서 우선 toString 메소드를 탐색하고, 없을 경우 Injuk에서, 다시 없을 경우 Object에서 탐색한다.
  • 이렇듯 프로토타입 체인은 실제로는 한 객체의 메소드와 속성이 모두 다른 객체로 복사되거나 상속되는 것이 아니다. 체인을 타고 올라가며 접근할 뿐임을 주목!
• 이렇게 상속(?) 받는 속성과 메소드는 모두 prototype '속성'에 정의된다.
• prototype의 확인은 console 탭에서 [객체].prototype으로 확인할 수 있다.
  • Object, Array, Number, String, Date, Boolean 등으로부터 prototype을 확인해보자.
  • Object를 제외한 모든 유형은 object를 prototype으로 갖는다.
  • 이러한 prototype chaining 구조 덕분에 우리는 별다른 추가 프로그래밍 없이 length, toString, split 등의 메소드를 객체 생성 직후에 사용할 수 있게 된다!

(__proto__에 주목하면 된다.)