Prototype Chain

용어 정리

prototype: 모델의 청사진을 만들 때 쓰는 원형 객체(original form). 속성이나 메소드를 정의할 수 있음. 할당이 가능함(assignable)
constructor: 인스턴스가 초기화될 때 실행하는 생성자 함수(특정 객체가 생성될 때 실행되는 코드). Class에서 Object를 생성하는 역할.
this: 함수가 실행될 때 해당 scope마다 생성되는 고유한 실행 context(this가 속해있는 메소드가 속해있는 객체를 가리킴). new 키워드로 인스턴스를 생성했을 때는 해당 인스턴스가 바로 this의 값이 됨

프로토타입 체인(Prototype Chain)이란 __proto__속성을 통해 상위 프로토타입과 연결되어있는 구조를 의미한다. 하위 프로토타입은 상위 프로토타입의 속성과 메소드를 상속받고 모든 객체는 Object.prototype을 가지고 있다. 즉 Object는 상속의 가장 상위 단계로, 모든 객체는 Object를 상속받는다.
이미지 출처: codestates urclass


상속에는 1)pseudoclassical 패턴 및 2)ES6 class keyword를 이용한 방법이 있다.

1. pseudoclassical 방법(원리 이해 중심)

이미지 출처: codestates urclass

1. constructor에 this 전달
2. Object.create메소드 사용(prototype 연결)
3. constructor 연결(2번 과정에서 constructor의 연결고리가 끊어졌기 때문에)
4. 메소드 재정의(필요할 경우)

- Object.create(proto): 첫번째 인자로 들어가는 prototype 객체를 기반으로 prototype를 만드는 것. 즉 proto에 객체를 넣고 그 객체를 prototype으로 만드는 것(prototype의 기능을 복사한 새로운 객체를 만드는 것)

Grub

var Grub = function () {
    this.age = 0;
    this.color = 'pink';
    this.food = 'jelly';
};

Grub.prototype.eat = function(){
    return 'Mmmmmmmmm jelly';
}

Bee

var Grub = require('./Grub');

var Bee = function () {
    Grub.call(this);
    this.age = 5;
    this.color = 'yellow';
    this.job = 'keep on growing';
};

Bee.prototype = Object.create(Grub.prototype);
Bee.prototype.constructor = Bee;

ForagerBee

var Bee = require('./Bee');

var ForagerBee = function () {
    Bee.call(this);
    this.age = 10;
    this.job = 'find pollen';
    this.canFly = true;
    this.treasureChest = [];
};

ForagerBee.prototype = Object.create(Bee.prototype);
ForagerBee.prototype.constructor = ForagerBee;

ForagerBee.prototype.forage = function(){
    this.treasureChest.push('treasure');
}

HoneyMakerBee

var Bee = require('./Bee');

var HoneyMakerBee = function () {
    Bee.call(this);
    this.age = 10;
    this.job = 'make honey';
    this.honeyPot = 0;
};

HoneyMakerBee.prototype = Object.create(Bee.prototype);
HoneyMakerBee.prototype.constructor = HoneyMakerBee;

HoneyMakerBee.prototype.makeHoney = function(){
    this.honeyPot++;
}

HoneyMakerBee.prototype.giveHoney = function(){
    this.honeyPot--;
}

2.ES6 방법(class 키워드 사용)

1. extends 키워드 사용
2. constructor 함수 생성
3. this 자리를 super로 대체(super는 constructor에서 한번만 사용가능하며, super 위의 this는 사용불가)
4. 메소드 재정의(필요할 경우)

Grub

class Grub {
  constructor(){
    this.age = 0;
    this.color = 'pink';
    this.food = 'jelly';
  }
  eat(){
    return 'Mmmmmmmmm jelly'
  }
}

Bee

const Grub = require('./Grub');

class Bee extends Grub{
  constructor(){
    super();
    this.age = 5;
    this.color = 'yellow';
    this.job = 'Keep on growing'
  }
}

ForagerBee

const Bee = require('./Bee');

class ForagerBee extends Bee {
  constructor() {
    super();
    this.age = 10;
    this.job = 'find pollen';
    this.canFly = true;
    this.treasureChest = [];
  }
  forage() {
    this.treasureChest.push('treasure');
  }
}

HoneyMakerBee

const Bee = require('./Bee');

class HoneyMakerBee extends Bee {
  constructor() {
    super();
    this.age = 10;
    this.job = 'make honey';
    this.honeyPot = 0;
  }
  makeHoney() {
    this.honeyPot++;
  }
  giveHoney() {
    this.honeyPot--;
  }
}