ES6 vs pseudoclassical(ES5) 상속방법에 대한 비교..

ES5의 상속 방법.. (현재는 벌의 성장과정에 대해서 예시를 들어서 코드를 작성했다.)

1단계 : 애벌레

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

애벌레의 나이는 0살 , 색깔은 핑크색, 음식은 jelly(로열젤리)를 먹는다. 먹는 것을 하기 떄문에 eat이라는 메소드를 가지고 있다.

 

2단계 : 성장중인 벌 

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; // 생성자 constructor 부모 생성자라는 값 constructor 안에 부모값 자체를 넣는거에요...
 

애벌레에서 성장중인 벌로 성장하게 된다. 그러면서 애벌레의 특성을 Grub.call(this)로 프로퍼티값을 가져온다.

하지만 벌로 성장하게되면서 바뀌는 것들을 재설정한다.

벌의 나이는 5살이며 , 색깔은 노란색, 하는 일은 keep on growing 여전히 자라는 일..

5살이기는 하지만 애벌레처럼 먹는 것을 지속해야한다. 그러므로 자식의 프로퍼티 값을 가지고 온다.

Bee.prototype = Object.create(Grub.prototype);   // Grub.prototype의 값을 상속받는다.

Bee.prototype.constructor = Bee // 자기 자신을 생성자로 설정해야 한다.

 

3단계 : 꿀을 만드는 벌

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--;
}

성장중인 벌에서 꿀을 만드는 벌로 진화하게 된다.

그러면서 성장중이었던 벌의 습성을 가지고 가게 된다. => Bee.call(this);

하지만 바뀐 것들은 재할당하게 된다. 나이는 10 살, 하는 일은 꿀을 만드는 일, 꿀을 담는 통을 가지게 된다.

HoneyMakerBee.prototype = Object.create(Bee.prototype); // 성장중인 벌의 프로토타입을 가져온다. 

HoneyMakerBee.prototype.constructor = HoneyMakerBee; // 생성자 프로퍼티로 자기 자신을 호출한다.

HoneyMakerBee.prototype.makeHoney  // 꿀을 생산한다 => 꿀단지의 꿀을 추가한다.

HoneyMakerBee.prototype.giveHoney  // 꿀을 기부한다 => 꿀단지의 꿀을 삭제한다.

 

3단계  꽃가루를 나르는 벌.

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

꽃가루를 나르는 벌은 그 전에 성장하는 중인 벌의 프로퍼티 값을 가져온다.

하지만 꽃가루 나르는 벌과 성장중인 벌의 프로퍼티가 다른 값들이 있다. 

그런값들은 재할당을 하게되는데 나이는 10살, 하는 일은 꽃가루를 나르는 일, 날 수 있다,  treasureChest을 가지게 된다.

ForagerBee.prototype = Object.create(Bee.prototype);  /*마찬가지로 꽃가루 나르는 벌은 성장하는 벌의 프로토타입을 가져와서 벌이 할 수 있는 일들을 그대로 상속 받게 된다. */

ForagerBee.prototype.constructor = ForagerBee;  /*생성자 설정으로는 자기자신을 집어넣는다*/

ForagerBee.prototype.forage  /*treasureChest에 treasure을 집에넣는 행위를 한다.*/

 

ES6 class 

ES6가 나오지만 자바랑은 다르다. 자바는 class 위주로 객체를 가져오지만 자바스크립트에 class를 쓴다고 해도 기존 프로토타입은 그대로 가지고 오게 된다.

그럼 위와 같은 예시로 한번 작성을 해보도록 하겠다.

 

1단계 애벌레

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

ES5와 다른점을 위주로 살펴보도록 하자.

constructor라는 생성자 함수를 생성해서 그 안에  자기 자신이 생성될떄 생성되는 프로퍼티를 적어놓았다.

그리고 생성자 함수랑은 다른 함수인 메소드로 사용할 함수같은 경우는 따로 class안에서 생성해 두었다.

잘 기억해놓도록 하자. 

 

2단계 성장중인 벌.

class Bee extends Grub {
  constructor() {
    super();   // Grub의 속성값을 상속
    this.age = 5;
    this.color = 'yellow';
    this.job = 'Keep on growing';
  }
}

2단계로 들어가면서 상속하는 것이 들어 갔을 것이다. 무엇이 달라졌는가?

class 설정을 하고 extends로 자식값을 상속받은 것이 보이는가? 

그리고 생성자 함수를 생성할 떄 super() 를 사용해서  Grub의 값들을 한번에 다 가져온다.

아주 편리한 기능이다.  기존에 ES5에서는 프로퍼티값과 메소드값을 상속받기 위해서  세줄을 더 작성해야만 했다. 그리고 자기자신도 지정해야 했다.

Grub.call(this); //프로퍼티값..

Bee.prototype = Object.create(Grub.prototype); //자식값을 가지고 와요.... 메소드를 포함값 값..

Bee.prototype.constructor = Bee; // 생성자

맨위의 ES5 코드를 그대로 가져온 것이니 참고 바란다.

 

3단계  꿀을 만드는 벌.

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

이제 어느정도 길이 보이는가???

class에 extends로 자식을 상속받도록 다음에 생성자 함수에는 super() 로 상속받고 makehoney, giveHoney로 메소드를 생성해서 위에서 하듯이 하면 된다. 

설명이 필요하면 댓글을 남겨라.

 

3단계 꽃가루를 나르는벌.

이쯤되면 설명을 할 필요가 없지 않을까 싶다.. 위의 꽃가루 나르는 벌 ES5코드를 보고 직접 작성한 뒤에 정답을 확인해라.

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

4단계 노화된 벌..

꽃가루 나르는 벌이 나이가 들어서 나이가 많이든 노화된 벌이 되었다.

나이는 40살이 되었고,

너무 나이가 들어서 카드게임을 한다고한다.  // return 형식으로 문자열로 너무 나이가 들어서 카드게임을 한다고 말해라 메소드

그렇게 gamble로 treasure을 treasurecheat에 쌓는다고 한다. // 겜블을 할때 보물을 treasurechest에 쌓는다 메소드

나이는 40, 직업은 GAMBLE , 날수없다, 색깔은 Grey라고 한다. 다음 정보를 바탕으로 class를 작성해보라.

답은 아래에 있다.

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