Beesbeesbees 과제
- -
반딧불
Beesbeesbees과제 레퍼런스의 의사코드를 작성하여 블로깅하세요.
코드스테이츠 BeeBeeBee 과제. 아래 조건을 만족하게 js를 수정해야 한다.
Class 구조
├── Grub
│ └── Bee
│ ├── HoneyMakerBee
│ └── ForagerBee
과제의 요구조건
Bee class functionality
✓ `age` 속성은 `5`이어야 합니다
✓ `color` 속성은 `yellow`이어야 합니다
✓ `food` 속성은 Grub으로부터 상속받습니다
✓ `eat` 메소드는 Grub으로부터 상속받습니다
✓ `job` 속성은 `Keep on growing`이어야 합니다
ForagerBee class functionality
✓ `age` 속성은 `10`이어야 합니다
✓ `job` 속성은 `find pollen`이어야 합니다
✓ `color` 속성은 `Bee`로부터 상속받습니다
✓ `food` 속성은 `Grub`으로부터 상속받습니다
✓ `eat` 메소드는 `Grub`으로부터 상속받습니다
✓ `canFly` 속성은 `true`이어야 합니다
✓ `treasureChest` 속성은 빈 배열 `[]`이어야 합니다
✓ `forage` 메소드를 통해 `treasureChest` 속성에 보물을 추가할 수 있어야 합니다
Grub class functionality
✓ `age` 속성은 `0`이어야 합니다
✓ `color` 속성은 `pink`이어야 합니다
✓ `food` 속성은 `jelly`이어야 합니다
✓ `eat` 메소드가 존재해야 합니다
✓ `eat` 메소드를 통해 `Grub`이 젤리를 먹습니다
HoneyMakerBee class functionality
✓ `age` 속성은 `10`이어야 합니다
✓ `job` 속성은 `make honey`이어야 합니다
✓ `color` 속성은 `Bee`로부터 상속받습니다
✓ `food` 속성은 `Grub`으로부터 상속받습니다
✓ `eat` 메소드는 `Grub`으로부터 상속받습니다
✓ `honeyPot` 속성은 `0`이어야 합니다
✓ `makeHoney` 메소드는 `honeyPot`에 1씩 추가합니다
✓ `giveHoney` 메소드는 `honeyPot`에 1씩 뺍니다
첫번째로 가장 상위의 클래스를 찾는다. 해당 과제에서는 Grub
class Grub { // 과제에서 가장 상위에 있는 클래스
// 클래스 객체의 초기값을 짖어하기 위해 객체가 생성될 때 실행되기로한 함수 constructor
// constructor 함수는 언제 호출되나요? >> 객체를 생성할때 constructor 생성자 함수가 호출됨
constructor() {
// 조건1. `age` 속성은 `0`이어야 합니다
// 조건2. `color` 속성은 `pink`이어야 합니다
// 조건3. `food` 속성은 `jelly`이어야 합니다
// this >> 어떤 메소드에서 그 메소드가 속해 있는 객체를 가리키는 특수한 키워드를 this
// 여기서 this는 객체 Grub
this.age = 0; // 조건1.
this.color = 'pink'; // 조건2.
this.food = 'jelly'; // 조건3.
}
eat(){ // 조건4. `eat` 메소드가 존재해야 합니다, 조건5. `eat` 메소드를 통해 `Grub`이 젤리를 먹습니다
return `Mmmmmmmmm ${this.food}`// 조건5에서 테스트에서 Mmmmmmmmm Jelly 출력되어야함.
}
}
module.exports = Grub;
두번째 Bee 에서는 Grub의 속성과 메서드를 상속받아 사용하려한다.
이때 class에서 만들때 extends를 사용해서 다른 클래스의 자식클래스를 생성(Grub라는 클래스의 자식요소로 만드려는 Bee 클래스).
super() 와 super. 의 용법은 각각 무엇인가?
부모 클래스를 기반으로 새로운 기능을 추가 구현한 자식 클래스를 상속받아 만들었을 때,
super()를 통해 부모 클래스의 constructor를 호출하여 부모 클래스 초기 셋팅값을 사용할 수 있고,
super.[메소드 이름] 을 통해 부모의 메소드를 호출하여 자식 클래스의 메소드와 콜라보를 할 수 있다.
결국 기본적인 기능이 구현된 부모 클래스를 확장하여 사용자에게 필요한 기능을 추가한 자식 클래스를 사용하는데,
코드의 중복없이 재사용성이 좋은 코드를 만들 수 있어 사용자의 편의를 증대시키고 유지보수가 편한 강려크한 기능!
const Grub = require('./Grub');
class Bee extends Grub{ // extends 키워드로 Grub의 자식클래스로 생성
/* 클래스 Bee에서 요구된 조건.
1) `age` 속성은 `5`이어야 합니다 > 바뀌는건 다시 작성
2) `color` 속성은 `yellow`이어야 합니다 > 바뀌는건 다시 작성
3) `food` 속성은 Grub으로부터 상속받습니다 > 상속받는건 안적어도 그대로 갖고옴
4) `eat` 메소드는 Grub으로부터 상속받습니다 > 상속받는건 안적어도 그대로 갖고옴
5) `job` 속성은 `Keep on growing`이어야 합니다 > 없는것도 새로 작성
*/
// 상속 클래스의 생성자에선 반드시 super()를 호출해야함.
// super()는 this를 사용하기 전에 반드시 호출해야 합니다.
// 상속을 받게 됐을 때 자식 클래스에서 새로운 요소를 추가할때 super를 사용하면 코드의 재사용을 줄일 수 있다.
constructor(){
super(); // 이전 부모클래스의 속성과 메서드를 가져오기위한 super() 함수;
this.age = 5; // 조건 1 바뀐것 다시 작성 (오버라이딩)
//오버라이딩,(method overriding)은 자식 클래스가 자신의 부모 클래스들 중 하나에 의해
//이미 제공된 함수 등을 특정한 형태로 구현하는 것을 말합니다. 부모 클래스에서 이미 정의된 함수 등을 자식
//클래스에서 같은 이름으로 사용하되 안에 들어가는 내용(기능, 속성 등)을 바꿔서 사용한다고 생각하면된다.
this.color = 'yellow'; // 조건2. 오버라이딩
this.job = `Keep on growing`; // 조건5. 없는것 추가 새로작성
// 조건3,4는 적지 않아도 위 super를 통해 가져온 상태(상속 받음)
}
}
module.exports = Bee;
만약 다른 클래스를 상속하는 경우, 기본 생성자는 자신의 매개변수를 부모 클래스의 생성자로 전달.
constructor(...args) {
super(...args);
}
├── Grub
│ └── Bee
│ ├── HoneyMakerBee
│ └── ForagerBee
에서 HoneyMakerBee, ForagerBee는 둘 다 Bee를 부모로해서 상속받는 자식들
const Bee = require('./Bee');
class ForagerBee extends Bee{ // Bee 를 부모로 자식요소로 만든다.
// 요구조건
/*
1) `age` 속성은 `10`이어야 합니다
2) `job` 속성은 `find pollen`이어야 합니다
3) `color` 속성은 `Bee`로부터 상속받습니다 > 상속 안적기
4) `food` 속성은 `Grub`으로부터 상속받습니다 > 상속 안적기
5) `eat` 메소드는 `Grub`으로부터 상속받습니다 > 상속 안적기
6) `canFly` 속성은 `true`이어야 합니다
7) `treasureChest` 속성은 빈 배열 `[]`이어야 합니다
8) `forage` 메소드를 통해 `treasureChest` 속성에 보물을 추가할 수 있어야 합니다
*/
constructor(){
super();
this.age = 10; // 조건1 오버라이딩
this.job = 'find pollen'; // 조건2 오버라이딩
this.canFly = true; // 조건6 없는것 만듬
this.treasureChest = []; // 조건7 없는것 만듬
// 조건 3,4,5는 Bee에서 상속 받은 상태. 안적어도 됨
}
forage(honey){ // 조건8 forage 메소드 만듬.
this.treasureChest.push(honey) // 여기서 this는 ForagerBee. ForagerBee의 treasureChest배열에 추가
}
}
module.exports = ForagerBee;
const Bee = require('./Bee');
class HoneyMakerBee extends Bee{ // Bee를 부모로 만든다
// 요구조건
/*
1) `age` 속성은 `10`이어야 합니다
2) `job` 속성은 `make honey`이어야 합니다
3) `color` 속성은 `Bee`로부터 상속받습니다 > 상속
4) `food` 속성은 `Grub`으로부터 상속받습니다 > 상속
5) `eat` 메소드는 `Grub`으로부터 상속받습니다 > 상속
6) `honeyPot` 속성은 `0`이어야 합니다
7) `makeHoney` 메소드는 `honeyPot`에 1씩 추가합니다
8) `giveHoney` 메소드는 `honeyPot`에 1씩 뺍니다
*/
constructor(){
super();
this.age = 10;
this.job = 'make honey';
this. honeyPot = 0;
}
makeHoney(){ // 조건7. 1씩 추가해주는 메소드
this.honeyPot += 1;
}
giveHoney(){ // 조건8. 1씩 빼주는 메소드
this.honeyPot -= 1;
}
}
module.exports = HoneyMakerBee;
'프론트엔드 공부 > 자바스크립트' 카테고리의 다른 글
Promise의 기능과 필요한 이유 (0) | 2023.02.10 |
---|---|
프로토타입(Prototype), 클래스, 인스턴스, 프로토타입의 관계 (1) | 2023.01.13 |
객체지향 프로그래밍 OOP (캡슐화, 상속, 추상화, 다형성) (0) | 2023.01.13 |
클래스(class)와 인스턴스(instance) 그리고 객체(object) (0) | 2023.01.13 |
고차함수, 일급객체, 내장고차함수(filter, map, reduce) (0) | 2023.01.12 |
소중한 공감 감사합니다