TIL - ES5, ES6로 상속 구현하기
1. ES5, ES6로 상속 구현하기
저번시간에 ES5, ES6 에서의 상속을 공부하였다.
ES5 문법에서는 prototype을 이용하여 구현하였고, ES6은 extends 키워드를 이용하여 구현하였다.
오늘은 이 내용을 바탕으로 실제 예제를 통해 상속을 구현해 보았다.
모든 Bee는 Grub을 기반으로 하여 각자의 특성에 맞는 일을 받게 된다.
공통된 특성을 기반으로 각자에게 맞는 특성을 부여받을 수 있는 것은 상속이 이루어졌음을 의미한다.
우선, 모든 클래스의 기반이 되는 Grub을 구현해보았다.
[조건] Grub
Create a Grub class, with:
1. age property that is set to 0
2. a color property that is set to pink
3. a food property that is set to jelly
4. an eat method that returns 'Mmmmmmmmm jelly'
[ES6]
class Grub { // class 키워드를 이용하여 Grub을 만든다. constructor() { this.age = 0; // 1. this.color = 'pink'; // 2. this.food = 'jelly'; // 3. } eat() { return 'Mmmmmmmmm jelly'; // 4. } } module.exports = Grub; //Grub 클래스를 다른 파일에서도 사용하기 위해 module.exports를 사용하였다.
[ES5]
var Grub = function () { this.age = 0; // 1. this.color = 'pink'; // 2. this.food = 'jelly'; // 3. }; Grub.prototype.eat = function() { //prototype을 이용하여 메서드를 생성한다. return 'Mmmmmmmmm jelly'; // 4. } module.exports = Grub;
다음으로는 이를 바탕으로 Grub을 상속받는 Bee를 구현하였다.
조건[Bee]
Create a Bee class, with:
1. the Grub superclass
2. an age property that is set to 5
3. a color property that is set to yellow
4. a food property that is inherited from grub
5. an eat method that is inherited from grub
6. a job property that is set to Keep on growing
[ES6]
const Grub = require('./Grub'); //Grub에 있는 내용을 사용하기 위해 require을 이용하였다. class Bee extends Grub{ // 1. 4. 5. //extends 키워드를 이용하여 상속받는다. constructor() { super(); // 1. this.age = 5; // 2. this.color = 'yellow'; // 3. this.job = 'Keep on growing'; // 6. } } module.exports = Bee; //Bee 클래스를 다른 파일에서도 사용하기 위해 module.exports를 사용하였다.
[ES5]
var Grub = require('./Grub'); var Bee = function (food) { // 4. Grub.call(this,food); // 1. this.age = 5; // 2. this.color = 'yellow'; // 3. this.job = 'Keep on growing'; // 6. }; //Object.create와 prototype.constructor를 이용하여 상속받았다. Bee.prototype = Object.create(Grub.prototype); // 1. 5. Bee.prototype.constructor = Bee; // 1. module.exports = Bee;
이를 바탕으로 Bee를 상속받는 HoneyMakerBee를 구현해보자.
조건[HoneyMakerBee]
Create a HoneyMakerBee class, with:
1. the Bee superclass
2. an age property that is set to 10
3. a job property that is set to make honey
4. a color property inherited from bee that is set to yellow
5. a food property that is inherited from grub
6. an eat method that is inherited from grub
7. a honeyPot property that is set to 0
8. a makeHoney method that adds 1 to that honeyBee's honeyPot
9. a giveHoney method that subtracts 1 from that honeyBee's honeyPot
[ES6]
const Bee = require('./Bee'); //Bee에 있는 내용을 사용하기 위해 require을 이용하였다. class HoneyMakerBee extends Bee{ //1. 5. 6. extends 키워드를 이용하여 상속받는다. constructor(color) { super(color); this.age = 10; // 2. this.job = 'make honey'; // 3. this.color = 'yellow'; // 4. this.honeyPot = 0; // 7. } makeHoney() { // 8. return this.honeyPot++; } giveHoney() { // 9. return this.honeyPot--; } } module.exports = HoneyMakerBee; //HoneyMakerBee 클래스를 다른 파일에서도 사용하기 위해 module.exports 하였다.
[ES5]
var Bee = require('./Bee'); //Bee에 있는 내용을 사용하기 위해 require을 이용하였다. var HoneyMakerBee = function (color, food) { Bee.call(this, color, food); // 1. 5. 6. this.age = 10; // 2. this.job = 'make honey'; // 3. this.color = 'yellow'; // 4. this.honeyPot = 0; // 7. }; //Object.create와 prototype.constructor를 이용하여 상속받았다. HoneyMakerBee.prototype = Object.create(Bee.prototype); // 1. HoneyMakerBee.prototype.constructor = HoneyMakerBee; // 1. HoneyMakerBee.prototype.makeHoney = function() { // 8. return this.honeyPot++; } HoneyMakerBee.prototype.giveHoney = function() { // 9. return this.honeyPot--; } module.exports = HoneyMakerBee;
이렇게 HoneyMakerBee까지 구현을 해 보았다. ForagerBee는 구현의 틀이 비슷하기 때문에 넘어가도록 하자.
ES5 문법을 사용하여 구현해 볼 때는 create, constructor 등 모든 단계가 눈에 명확히 보여서 상속의 흐름을 잘 파악해 볼 수 있었다. 반면에 ES6 문법을 사용하여 구현해 볼 때는 extends와 super 키워드만으로도 상속이 구현되니 코드가 훨씬 깔끔해지고 가독성도 좋았다. 엔지니어분 말씀으로는 요즘 ES6 문법을 많이 사용하는 추세지만 한 번쯤은 ES5 문법을 통해 상속의 흐름을 파악하는 것이 중요하다고 하셨다.
내일은 자바스크립트의 상속, 다형성을 이용하여 또 다른 과제를 진행한다.
오늘은 여기까지!
