모던 자바스크립트 (프로토타입과 프로토타입 상속) 6-1. 프로토타입 상속 / 함수의 prototype 프로퍼티

프로토타입 상속

: 비슷한 기능의 객체를 만들어야 할 때 원본 객체에 약간의 기능을 얹어 만드는 방법

 

- [[Prototype]]

: 자바 스크립트의 객체가 갖는 숨김 프로퍼티

: 이 숨김 프로퍼티 값은 null이거나 다른 객체에 대한 참조가 됨

: 다른 객체를 참조하는 경우 참조 대상을 prototype이라고 함

: 자바스크립트는 자동으로 프로토 타입에서 프로퍼티를 찾음 > 프로토타입 상속

 

- [[prototype]] 프로퍼티의 값 설정

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

rabbit.__proto__ = animal;

: __proto__는 [[Prototype]] 용 getter이자 setter

: 근래에는 Object.getPrototypeOf 혹은 Object.setPrototypeOf를 사용

 

- 프로토타입 체이닝

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

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

let longEar = {
  earLength: 10,
  __proto__: rabbit
};

// 메서드 walk는 프로토타입 체인을 통해 상속받았습니다.
longEar.walk(); // 동물이 걷습니다.
alert(longEar.jumps); // true (rabbit에서 상속받음)

: 순환참조는 허용되지 않음

: __proto__의 값은 객체나 null만 가능

: 오직 하나의 [[Prototype]]만 있을 수 있음

 

 

 

 

 

프로토타입의 특징

- 읽기전용

: 프로토타입은 프로퍼티를 읽을 때만 사용

: 프로퍼티를 추가, 수정하거나 지우는 연산은 객체에서 해야함

 

- this와 무관

: 메서드를 객체에서 호출하든 프로토타입에서 호출하든 this는 언제나 . 앞에 있는 객체임

 

- for..in 반복문

: 상속 프로퍼티도 순회대상에 포함 가능

: obj.hasOwnProperty(key)를 이용하면 상속 프로퍼티를 순회 대상에서 제외 가능

  이 경우, obj에 직접 구현되어 있는 프로퍼티 일때만 true 반환

 

 

 

 

함수의 prototype 프로퍼티

: 함수를 사용해 객체를 만든 경우의 프로토타입

: 생성자 함수를 사용해 객체를 만들었을 때는 리터럴 방식과 달리 

  생성자 함수의 프로토타입이 객체인 경우 new 연산자로 만든 객체는 생성자 함수의

  프로토타입 정보를 사용해 [[Prototype]]을 설정

let animal = {
  eats: true
};

function Rabbit(name) {
  this.name = name;
}

Rabbit.prototype = animal;

let rabbit = new Rabbit("흰 토끼"); //  rabbit.__proto__ == animal

alert( rabbit.eats ); // true

 

 

 

 

함수의 default 프로퍼티 prototype과 constructor 프로퍼티

: 모든 함수는 기본적으로 prototype 프로퍼티를 가짐

function Rabbit() {}
// 함수를 만들기만 해도 디폴트 프로퍼티인 prototype이 설정됩니다.
// Rabbit.prototype = { constructor: Rabbit }

alert( Rabbit.prototype.constructor == Rabbit ); // true

function Rabbit() {}
// 디폴트 prototype:
// Rabbit.prototype = { constructor: Rabbit }

let rabbit = new Rabbit(); // {constructor: Rabbit}을 상속받음

alert(rabbit.constructor == Rabbit); // true ([[Prototype]]을 거쳐 접근함)

function Rabbit(name) {
  this.name = name;
  alert(name);
}

let rabbit = new Rabbit("흰 토끼");

let rabbit2 = new rabbit.constructor("검정 토끼");

function Rabbit() {}

// Rabbit.prototype 전체를 덮어쓰지 말고
// 원하는 프로퍼티가 있으면 그냥 추가합니다.
Rabbit.prototype.jumps = true
// 이렇게 하면 디폴트 프로퍼티 Rabbit.prototype.constructor가 유지됩니다.

Rabbit.prototype = {
  jumps: true,
  constructor: Rabbit
};

// 수동으로 constructor를 추가해 주었기 때문에 우리가 알고 있던 constructor의 특징을 그대로 사용할 수 있습니다.

 

 

 

 

 

 

 

 

Refference

프로토타입 상속

함수의 prototype 프로퍼티