[JS] {Beesbeesbees}, super, extends, class, constructor( ),get-set

constructor

constructor 메서드는 클래스의 인스턴스 객체를 생성하고 초기화하는 특별한 메서드입니다.

class Polygon {
  constructor() {
    this.name = 'Polygon';
  }
}

const poly1 = new Polygon();

console.log(poly1.name);
// expected output: "Polygon"

 

constructor - JavaScript | MDN

---

super

super 키워드는 부모 오브젝트의 함수를 호출할 때 사용됩니다.

super 선 호출 후 this. 키워드 사용 가능!

    super([arguments]); // 부모 생성자 호출
    super.functionOnParent([arguments]);

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
}

class Square extends Polygon {
  constructor(length) {
    this.height; // 참조오류가 발생합니다. super가 먼저 호출되어야 합니다.

    // 여기서, 부모클래스의 생성자함수를 호출하여 높이값을 넘겨줍니다.
    // Polygon의 길이와 높이를 넘겨줍니다.
    super(length, length);

    // 참고: 파생 클래스에서 super() 함수가 먼저 호출되어야
    // 'this' 키워드를 사용할 수 있습니다. 그렇지 않을 경우 참조오류가 발생합니다.
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }

  set area(value) {
    this.area = value;
  }
}

정적 메서드에서 Super 호출

class Human {
  constructor() {}
  static ping() {
    return 'ping';
  }
}

class Computer extends Human {
  constructor() {}
  static pingpong() {
    return super.ping() + ' pong';
  }
}
Computer.pingpong(); // 'ping pong'

super의 속성 삭제

delete 연산자를 사용할 수 없으며 super.prop 또는 super[expr] 표현식을 사용하여 부모 클래스의 속성을 삭제할 경우 [ReferenceError]오류가 발생합니다.

 

super - JavaScript | MDN

---

extends

extends 키워드는 클래스를 다른 클래스의 자식으로 만들기 위해 class 선언 또는 class 식에 사용됩니다.

class ChildClass extends ParentClass { ... }

 

 

extends - JavaScript | MDN

 

---

프로퍼티 getter와 setter

첫 번째 종류는 데이터 프로퍼티(data property) 입니다.

지금까지 사용한 모든 프로퍼티는 데이터 프로퍼티입니다.

 

두 번째는 접근자 프로퍼티(accessor property) 라 불리는 새로운 종류의 프로퍼티입니다.

접근자 프로퍼티의 본질은 함수인데, 이 함수는 값을 획득(get)하고 설정(set)하는 역할을 담당합니다. 그런데 외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 보입니다.

 

접근자 프로퍼티는 'getter(획득자)'와 ‘setter(설정자)’ 메서드로 표현됩니다. 객체 리터럴 안에서 getter와 setter 메서드는 get과 set으로 나타낼 수 있습니다.

let obj = {
  get propName() {
    // getter, obj.propName을 실행할 때 실행되는 코드
  },
 
  set propName(value) {
    // setter, obj.propName = value를 실행할 때 실행되는 코드
  }
};

getter 메서드는 obj.propName을 사용해 프로퍼티를 읽으려고 할 때 실행됩니다.

setter 메서드는 obj.propNAme = value으로 프로퍼티에 값을 할당하려 할 때 실행됩니다.

 

[JS] 📚 자바스크립트 Getter & Setter 개념 정리

---

 

[ Beesbeesbees ]

→ 상속 개념 class, extends, super, constructor() 을 이용하여 test 통과하는 과제

하면서 개념학습과, 복습 하기에 좋았다⚡️

Grub class functionality

✓ age 속성은 0이어야 합니다 ✓ color 속성은 pink이어야 합니다 ✓ food 속성은 jelly이어야 합니다 ✓ eat 메소드가 존재해야 합니다 ✓ eat 메소드를 통해 Grub이 젤리를 먹습니다

class Grub {
  constructor(){
    this.age = 0;
    this.color = 'pink';
    this.food = 'jelly';
    
  }
  eat(){
    return 'Mmmmmmmmm ' + this.food
  } // 띄워 쓰기 잘 보기
}

Bee class functionality

✓ age 속성은 5이어야 합니다 ✓ color 속성은 yellow이어야 합니다 ✓ food 속성은 Grub으로부터 상속받습니다 ✓ eat 메소드는 Grub으로부터 상속받습니다 ✓ job 속성은 Keep on growing이어야 합니다

class Bee extends Grub{
  constructor() {
    super() // 선 호출

    this.age = 5;
    this.color = 'yellow';
    this.job = 'Keep on growing'
  }
}

ForagerBee class functionality

✓ age 속성은 10이어야 합니다 ✓ job 속성은 find pollen이어야 합니다 ✓ color 속성은 Bee로부터 상속받습니다 ✓ food 속성은 Grub으로부터 상속받습니다 ✓ eat 메소드는 Grub으로부터 상속받습니다 ✓ canFly 속성은 true이어야 합니다 ✓ treasureChest 속성은 빈 배열 []이어야 합니다 ✓ forage 메소드를 통해 treasureChest 속성에 보물을 추가할 수 있어야 합니다

class ForagerBee extends Bee{
  constructor() {
    super()

    this.age = 10;
    this.job = 'find pollen';
    this.canFly = true;
    this.treasureChest = [];

  }
  forage(treasure) {
    this.treasureChest.push(treasure)
  }

}

HoneyMakerBee class functionality

✓ age 속성은 10이어야 합니다 ✓ job 속성은 make honey이어야 합니다 ✓ color 속성은 Bee로부터 상속받습니다 ✓ food 속성은 Grub으로부터 상속받습니다 ✓ eat 메소드는 Grub으로부터 상속받습니다 ✓ honeyPot 속성은 0이어야 합니다 ✓ makeHoney 메소드는 honeyPot에 1씩 추가합니다 ✓ giveHoney 메소드는 honeyPot에 1씩 뺍니다

class HoneyMakerBee extends Bee{
  constructor() {
    super()

    this.age = 10;
    this.job = 'make honey';
    this.honeyPot = 0;
  }
  makeHoney() {
    this.honeyPot++
  }
  giveHoney() {
    this.honeyPot--
  }
  
}

 

📌 확실히 느낀건 그냥 읽는 것 보단 풀면서 직접 작성 해보는게 금방 오는거 같다^^