TIL(20.03.26) Immersive #9 Inheritance implementation

< 오늘 배운 것>😆

• Inheritance implementation

• Psedoclassical Inheritance implementation

• ES6 Inheritance implementation

오늘은 어제 배웠던 prototype chain과 Inheritance pattern을 배운 내용을 토대로 psedoclassical & es6로 상속패턴 구현하는 과제를 해보았습니다. 오늘은 내용위주가 아닌 직접 구현해보았던 코드를 리뷰하고 마무리하는 포스팅으로 진행하겠습니다.

1. ES6

문제의 내용은 대략 Grub,Bee,ForagerBee,HoneyMakerBee 총 4가지 파일이 있습니다. 이 네가지 파일은 서로 상속에 상속을 해줍니다. 상속을 하면서 다형성을 가지는 파일도 존재합니다. 코드를 통해 문제를 보겠습니다.

Grub

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

Grub 클래스입니다. constructor를 사용하였고 클래스 내부에 함수를 구현 하였습니다.

Bee

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

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

const Grub = require("./Grub"); 를 통해 Grub 클래스 파일을 참조 해 주었습니다.
또 super키워드를 사용함으로서 Grub의 변수들을 가져와 주었습니다. 사실 Grub의 변수들과 같다면 super를 쓰지 않더라도 extends 키워드로만 상속이 가능합니다.

ForagerBee

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

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

Bee를 상속하고 forage함수를 만들어 주었습니다. 다형성 구현을 위해 age값을 바꾸어 적용 시킨 것을 볼 수 있습니다.

HoneyMakerBee

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

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

super키워드의 유의점은 constructor에서 한번만 사용이 가능하고 super키워드 위 this키워드는 사용이 불가합니다.

ForagerBee

const ForagerBee = require("./ForagerBee");

class RetiredForagerBee extends ForagerBee {
  constructor() {
    super();
    this.age = 40;
    this.job = "gamble";
    this.canFly = false;
    this.color = "grey";
  }
  forage() {
    return "I am too old, let me play cards instead";
  }
  gamble(value) {
    this.treasureChest.push(value);
  }
}

Advanced challenge

const ForagerBee = require("./ForagerBee");

class RetiredForagerBee extends ForagerBee {
  constructor() {
    super();
    this.age = 40;
    this.job = "gamble";
    this.canFly = false;
    this.color = "grey";
  }
  forage() {
    return "I am too old, let me play cards instead";
  }
  gamble(value) {
    this.treasureChest.push(value);
  }
}

시간이 남아 Advanced challenge도 만들어 주었습니다.

2. Pseudoclassical

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;

prototype 키워드와 Object.create 키워드를 사용하여 구현 하였습니다. ES6 class와 비교해 불편 한 것을 볼 수 있습니다. psedoclassical에서는 consturctor가 연결이 되지 않기 때문에 constructor 연결을 반드시 해주어야 하고 상속은 Object.create 키워드를 사용하여 해주어야 합니다.

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(value) {
  this.treasureChest.push(value);
};

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 += 1;
};
HoneyMakerBee.prototype.giveHoney = function() {
  this.honeyPot -= 1;
};

ES6와 psedoclassical을 통해 상속을 구현 해 보았습니다. ES6와 psedoclassical 상속을 비교 했을 때 psedoclassical을 통한 상속에 대해 불편함을 느낄거라 생각이 됩니다. ES6 버전이 나오기 전에 psedoclassical을 사용하여 상속을 해주었기 때문에 두가지 방식 모두 알고 적용 할 줄 알아야 한다고 생각합니다.