TIL 👩🏻‍💻

TIL : BeesBeesBees

heesue 2021. 4. 12. 19:59

이번과제는 ES6과 ES5(pseudoclassical)로 나뉘어 있어 각 디렉토리에 맞춰 코드를 짜야 했다. ES6은 super, extends, class 키워드를 이용하고 pseudoclassical은 prototype 키워드를 이용한다.


1. ES6

Grub이 다른 Bee의 기반이 되므로 먼저 Grub.js를 작성한다. 이후 Bee.js는 extends Grub을 한 후 조건에 맞게 super를 이용해 작성한다. ForagerBee도 마찬가지로 extends Bee를 한 후 같은 방식으로 쓴다. 이때 super할 요소가 여러 개일 때는 쉼표로 나열해준다. HoneyMakerBee도 extends Bee이고 함수가 여러 개인 것 빼곤 같은 방식이다. 부모 객체에서 함수를 호출할 때에도 super를 이용해준다.

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

module.exports = Grub;

//이후 Grub의 eat 함수를 호출할 때에도
//eat() {
//  super.eat();
//}
//이렇게 super를 이용한다.

2. pseudoclassical

pseudoclassical 또한 Grub이 다른 Bee들의 기반이 되므로 먼저 작성해주는데 prototype을 이용해야 한다! 이후 Bee.js나 나머지 Bee들을 작성할 때 이번에는 super를 사용하지 않고 call이나 apply로 작성해야 한다. 또한, Bee.js로 예시를 들면 Grub이 부모 객체가 되는 것을 적어줘야 하기 때문에 Object.create을 이용해준다.

var Grub = function (age, color, food) {
    this.age = 0
    this.color = 'pink'
    this.food = 'jelly'
};

Grub.prototype.eat = function () {
    return 'Mmmmmmmmm jelly';
}

module.exports = Grub;

//Bee.js 일부분
//Bee.prototype = Object.create(Grub.prototype)
//Bee.prototype.constructor = Bee
//Bee.prototype.eat = function () {};

아직 OOP와 프로토타입 모두 익숙하지 않아 시작이 어려웠는데 한 개를 통과하고 나니까 계속 수정하면서 금방 끝낼 수 있었다!! 처음엔 어려웠지만 재밌는 스프린트였다. 이 스프린트로 상속을 특히 잘 배울 수 있었다.

'TIL 👩🏻‍💻' 카테고리의 다른 글

TIL : Stack & Queue  (0) 2021.04.14
TIL : Subclass Dance Party  (0) 2021.04.13
TIL : Prototype  (0) 2021.04.10
TIL : OOP  (0) 2021.04.09
TIL : call & apply & bind 메서드  (0) 2021.04.09