프로토타입

: javascript는 클래스라는 개념이 없어 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어 상속을 흉내내어 구현

Person.prototype이라는 빈 Object가 어딘가에 존재하고, Person 함수로부터 생성된 객체(kim, park)들은 어딘가에 존재하는 Object에 들어있는 값을 모두 갖다쓸 수 있습니다.

즉, eyes와 nose를 어딘가에 있는 빈 공간에 넣어놓고 kim과 park이 공유해서 사용

function Person() {}

Person.prototype.eyes = 2;
Person.prototype.nose = 1;

var kim  = new Person();
var park = new Person():

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

 

다시 설명해보면, javscript의 객체는

[[Prototype]]

이라는 숨김 프로퍼티를 갖습니다. 이 숨김 프로퍼티의 값은 null이거나 다른 객체의 참조가 되는데, 다른 객체를 참조하는 경우 참조 대상을

프로토타입(prototype)

이라 부릅니다.

object

에서 프로퍼티를 읽으려고하는데 해당 프로퍼티가 없으면 자바스크립트는 자동으로 프로토타입에서 프로퍼티를 찾습니다. 프로그래밍에선 이런 동작 방식을 프로토타입 상속 이라 부릅니다.

 

아래 예시처럼 특별한 이름인 __proto__을 사용하면 값을 설정할 수 있습니다.

let animal = {
  eats: true
};
let rabbit = {
  jumps: true
};

rabbit.__proto__ = animal;

 

 

객체 rabbit에서 프로퍼티를 얻고싶은데 해당 프로퍼티가 없다면, 자바스크립트는 자동으로 animal이라는 객체에서 프로퍼티를 얻습니다.

let animal = {
  eats: true
};
let rabbit = {
  jumps: true
};

rabbit.__proto__ = animal; // (*)

// 프로퍼티 eats과 jumps를 rabbit에서도 사용할 수 있게 되었습니다.
alert( rabbit.eats ); // true (**)
alert( rabbit.jumps ); // true

 

(*)

로 표시한 줄에선 

animal

이 

rabbit

의 프로토타입이 되도록 설정하였습니다.

(**)

로 표시한 줄에서 

alert

 함수가 

rabbit.eats

 프로퍼티를 읽으려 했는데,

  rabbit

엔 

eats

라는 프로퍼티가 없습니다. 이때 자바스크립트는 

[[Prototype]]

이 참조하고 있는 객체인

 animal

에서 

eats

를 얻어냅니다. 다음 그림을 밑에서부터 위로 살펴보세요.

이제 “rabbit의 프로토타입은 animal입니다.” 혹은 "rabbit은 animal을 상속받는다."라고 말 할 수 있게 되었습니다.

 

프로토타입을 설정해 준 덕분에 

rabbit

에서도 

animal

에 구현된 유용한 프로퍼티와 메서드를 사용할 수 있게 되었네요. 이렇게 프로토타입에서 상속받은 프로퍼티를 '상속 프로퍼티(inherited property)'라고 합니다.

상속 프로퍼티를 사용해 

animal

에 정의된 메서드를 

rabbit

에서 호출해 봅시다.

let animal = {
  eats: true,
  walk() {
    alert("동물이 걷습니다.");
  }};

let rabbit = {
  jumps: true,
  __proto__: animal
};

// 메서드 walk는 rabbit의 프로토타입인 animal에서 상속받았습니다.
rabbit.walk(); // 동물이 걷습니다.

 

아래 그림과 같이 프로토타입(animal)에서 walk를 자동으로 상속받았기 때문에 rabbit에서도 walk를 호출할 수 있게 되었습니다.