[JS] 실습 - Beesbeesbees

 

 

 

 

 

 

 

 

📌 Beesbeesbees 

 

 

 

📖 학습 목표

 

• 클래스와 인스턴스에 대해 이해하고 있다.
• 프로토타입이 무엇인지 알고 각자 비교할수 있다.
• 프로토타입 체인을 활용할수 있다.

 

 

 

 

 

 

 

👶 나의 실습

 

1) 코딩 전 최상위 클래스가 어딘지를 확인

2) 부모 - 자식관의 관계를 명확히 이해

3) 상속 명령어 사용

4) this, super의 이해

 

<Bee.js>

 

const Grub = require('./Grub');

class Bee extends Grub { // Grup의 속성을 상속 받는다
  constructor() {
    super(); // 상위 클래스의 생성자를 호출

    this.age = 5; // Bee.age의 속성 정의
    this.job = 'Keep on growing'; // Bee.job의 속성 정의
    this.color = 'yellow'; // Bee.color의 속성 정의
  }
}

module.exports = Bee;

 

<grub.js>

 

class Grub { // 가장 먼저 클래스를 정의하는 것이 좋다
  constructor() {
    this.age = 0; // Grub.age 속성 정의
    this.color = 'pink'; // Grub.color 속성 정의
    this.food = 'jelly'; // Grub.food 속성 정의
  }

  eat() { // eat 함수 호출
    return 'Mmmmmmmmm ' + this.food; // 템플릿리터럴 사용하여 food속성을 가져와 정의
  }
}

module.exports = Grub;

 

 

<HoneyMakerBee.js>

 

const Bee = require('./Bee');

class HoneyMakerBee extends Bee { // Bee의 속성을 상속 받는다
  constructor() {
    super(); // 상위 클래스의 생성자를 호출

    this.age = 10; // HoneyMakerBee.age 의 속성을 정의
    this.job = 'make honey'; // HoneyMakerBee.job 의 속성을 정의
    this.honeyPot = 0; // HoneyMakerBee.honeyPot 의 속성을 정의
  }

  makeHoney() { //makeHoney 함수 호출
    this.honeyPot++; // honeyPot`에 1씩 추가
  }

  giveHoney() { //giveHoney 함수 호출
    this.honeyPot--; //honeyPot`에 1씩 감소
  }
}

module.exports = HoneyMakerBee;

 

<ForagerBee.js>

 

const Bee = require('./Bee');

class ForagerBee extends Bee { // Bee의 속성을 상속 받는다
  constructor() {
    super(); // 상위 클래스의 생성자를 호출

    this.age = 10; // ForagerBee.age 의 속성을 정의
    this.canFly = true; // ForagerBee.canFly 의 속성을 정의
    this.job = 'find pollen'; // ForagerBee.job 의 속성을 정의
    this.treasureChest = []; // ForagerBee.treasureChest 의 속성을 빈 배열로 선언
  }

  forage(treasure) {
    this.treasureChest.push(treasure); // `treasureChest` 속성에 보물을 추가
  }
}

module.exports = ForagerBee;

 

 

 

🧐 this를 쓰는 이유

 

자바에서는 인스턴스 자신을 가리키는 키워드

멤버변수의 식별자가 겹치는 경우가 발생할 때 유용하게 사용!

 

자세한 내용 👇👇👇👇👇(유용했습니당)

 

https://smoothiecoding.kr/%EC%9E%90%EB%B0%94-this-%EC%9D%98%EB%AF%B8/

자바 this 의미 | 자바 입문강좌 13 - 스무디코딩