[Javascript] 프로토타입 (Prototype) 이란?

Prototype이란?

JS에서 객체를 만들기 위해 사용하는 객체

( Prototype : 근원, 근원이 되는 )

 

Prototype을 만든 이유

Javascript는 클래스 개념이 없다.

그래서 기존의 객체(Prototype)를 참조해, 새로운 객체를 만드는 방식을 사용한다.

 

기본 Prototype 생김새 ( 최상위 객체 - 프로토타입이 없는 객체 )

const Object = {
  constructor: ƒ Object()  // 자식 객체 만들때 사용하는 함수
  hasOwnProperty: ƒ hasOwnProperty()
  isPrototypeOf: ƒ isPrototypeOf()
  propertyIsEnumerable: ƒ propertyIsEnumerable()
  toLocaleString: ƒ toLocaleString()
  toString: ƒ toString()
  valueOf: ƒ valueOf()
  __defineGetter__: ƒ __defineGetter__()
  __defineSetter__: ƒ __defineSetter__()
  __lookupGetter__: ƒ __lookupGetter__()
  __lookupSetter__: ƒ __lookupSetter__()
  
  __proto__: (...)  // 부모 객체를 지정할때 사용하는 함수
  get __proto__: ƒ __proto__()
  set __proto__: ƒ __proto__()
}

 

 

JS의 모든 객체는, 자신의 부모역할을 하는 객체(프로토타입)가 있고,

prototype 이란 숨겨진 속성에, 부모 객체(프로토타입)의 메모리주소를 보관한다.

// animal이란 객체 생성시, prototype 속성 할당

const animal = {
  eats : true,
  /* 숨겨진 변수
  prototype: 기본 Prototype의 메모리 주소
  */
}

 

JS객체에 Prototype 설정하기 (__proto__)

우리가 만든 객체를 Prototype으로 사용하여, 새로운 객체를 만들 수 있다.

const animal = {
  eats: true
}

const rabbit = {
  jumps: true
  __proto__: animal
}

// or

const rabbit = {
  jumps: true
}

rabbit.__proto__ = animal

 

 

현재 객체에 찾으려는 속성이 없다면, 이를 프로토타입의 속성에서 다시 찾는다.

// rabbit 객체에 접근
console.log(rabbit.eats)

rabbit : {
  // eats 속성 없음
  jumps: true
  
  // prototype에 접근
  prototype: animal
}

animal : {
  // eats 속성 있으므로, 해당 value 반환
  eats: true
}