시간은 빠르고 한정적이고 끊임없이 부족하다. 잠도 자야되고 공부도 해야 하고 신림에서 선릉까지 왔다갔다 또 주말에는 대전 왔다 갔다...그래도 2주가 순식간에 흘러갔고 Dance Party Sprint를 진행하며 Prototype Chain에 관해 많은 것을 배워 정리를 해야할 것 같아서 한다.

Prototype

자바 스크립트에서 좋은 점은 객체 지향프로그램이여서 상속과 다변형?(Polymorphism)이 가능하다는 것이다. 실제로 이번 Dance Party 프로젝트를 진행할 때 부모 클래스를 설정하면, 그것을 상속해 와서 부모 클래스에 있는 것들을 다 가지고 또 method도 사용하면서, 원하는 부분까지 추가하고 변형해(polymorphism) 사용할 수 있어 매우 편리했다. ES6에는 Class가 생기면서 조금 더 수월해진 부분이 없잖아 있다. 이번 포스트 에서는 Class를 사용한 상속과 또 Class가 없었던, ES5시절에 있었던 상속하는 법을 보겠다.

Class 를 이용한 상속 ES6

class Food {
  constructor (taste, color){
    this.taste = "good";
    this.color = "pink";
  }

  eat(){
    return 'Mmmmmmmmm yummy!';
  }
}

가장 상위 클래스인 Food를 만들었다. 그러면 이거를 한번 상속해볼까??

class Chicken extends Food{

  constructor(taste, color, price){
    super(taste, color)
    this.price = [];
  }
  eat(){
    return "Oh yeah" + super.eat();
  }

  pay(value){
    this.price.push(value);
  }
}  

치킨이라는 클래스는 Food이라는 클래스에 extends를 통해 연결한다. 그리고 super라는 키워드를 통해 필요한 것들을 가져온다. super(taste, color) 를 통해 Food의 taste와 color를 가져올 수 있다. 명심할 것은 super를 먼저 해줘야 그 후 this를 사용할 수 있다. 그리고 아래 method 부분에서도 super로 Food의 method를 가져와 준 후, 원하는 내용을 추가하거나 변형할 수 있다. 이것이 polymorphism, 자신이 원하는 대로 변형 시키는 것이다. pay라는 method는 Chicken 이라는 클래스의 method이기 때문에 상위 클래스인 Food에서는 찾아볼 수 없다.

this 바인딩!

Dance Party sprint를 진행할 때 상속 받는 method의 this를 바인드 해줄지 말지를 잘 알고 필요시 해줘야 한다!!!! 만약 부모 클래스에서 받은 인자로 method를 실행하고 계속 그 값을 유지하고 부모 class의 context를 계속 하위 class에서도 사용하고 싶다면 꼭 this를 바인딩 해줘야한다.

Instantiation Pattern ES5

ES5에서는 클래스라는 개념은 있었지만 class라는 키워드가 없어서 다른 방법으로 상속과 다변형을 구현해 줘야 했다. Functional, Functional-shared, Prototypal, Psedoclassical중 그나마 편한? Pseudoclassical로 예를 보여주겠다.

var Food = function() {
  this.taste = "good";
  this.color = "pink";
};

Food.prototype.eat = function() {
  return "Mmmmmmmmm yummy";
};

이런 식으로 class 키워드가 아닌 함수를 만들어 property를 설정해 주고 prototype을 통해 method를 만들어 준다. 그럼 이 Food이라는 함수를 받아보자.

var Chicken = function(taste, color, price) {
  Food.call(this, taste, color);
  this.price = [];
};

Chicken.prototype = Object.create(Food.prototype);
Chicken.prototype.constructor = Chicken;

Chicken.prototype.price = function(value) {
  this.price.push(value);
};

Chicken 은 Food 이라는 부모 함수를 상속 받아 그 method도 받아오고 또 constructor도 설정을 해준다.
Food.call 부분으로 Chicken 의 taste와 color를 받아오는데 중요한건 this를 설정해준다는 것이다.
Chicken 의 prototype은 Object.create으로 Food 의 prototype과 연결해주고 또 constructor도 설정해준다. 만약 Food의 method인 eat()을 수정하고 싶다면 Chicken.prototype.eat 을 만들어주고 call 로 상위 객체의 method를 가져온 후 함수의 내용을 수정해주면 된다. super의 역할을 call이 해준다. 다변형의 장점은 속성을 공유한다는 점에 더 지분을 차지한다. 실제로 해봐야 바로 감이 잡힌다~~~