< 오늘 배운 것>😆
-
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을 사용하여 상속을 해주었기 때문에 두가지 방식 모두 알고 적용 할 줄 알아야 한다고 생각합니다.
