일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 자바스크립트
- JS#3일차달리자#초반인데#시간금방~
- 노드교과서
- js
- toString#String
- dom
- https://www.daleseo.com/js-array-slice-splice/
- ㄷㅌ
- @redux-toolkit
- cmarket
- 헷갈린다~
- https://dasima.xyz/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%A0%9C%EA%B3%B1-math-pow-%EA%B3%84%EC%82%B0/
- children vs childrenNodes
- removeCookie
- 내장고차함수
- for~in/for~of
- 자바스크립트#JS#slice#splice
- 자바스크립트#JS#var#let#const#undefined#null
- Beesbeesbees
- https://developer-talk.tistory.com/299
- redux상태유지
- variable#function
- UI
- User Flow
- CSS
- 자바스크립트#조건문#문자열
- react
- https://lo-victoria.com/introduction-to-redux-toolkit-for-beginners
- UX
- slice/splice/split
- Today
- Total
Daily Front_Minhhk
[JS] {Beesbeesbees}, super, extends, class, constructor( ),get-set 본문
[JS] {Beesbeesbees}, super, extends, class, constructor( ),get-set
Minhhk 2022. 11. 21. 14:22constructor
constructor 메서드는 클래스의 인스턴스 객체를 생성하고 초기화하는 특별한 메서드입니다.
class Polygon {
constructor() {
this.name = 'Polygon';
}
}
const poly1 = new Polygon();
console.log(poly1.name);
// expected output: "Polygon"
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]오류가 발생합니다.
extends
extends 키워드는 클래스를 다른 클래스의 자식으로 만들기 위해 class 선언 또는 class 식에 사용됩니다.
class ChildClass extends ParentClass { ... }
프로퍼티 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으로 프로퍼티에 값을 할당하려 할 때 실행됩니다.
[ 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--
}
}
📌 확실히 느낀건 그냥 읽는 것 보단 풀면서 직접 작성 해보는게 금방 오는거 같다^^
'Code개발일지' 카테고리의 다른 글
[JS] 타이머API[setTimeout,setInterval() ] / (node.js)-fs.readFile(path[, options], callback) (0) | 2022.11.24 |
---|---|
[JS] 비동기[callBack, Promise, async-await] (0) | 2022.11.24 |
[JS] 프로토타입, 체인 (0) | 2022.11.18 |
[OOP] 객체지향 프로그래밍 (0) | 2022.11.18 |
[JS] 클래스와 인스턴스(ES5,ES6) (0) | 2022.11.18 |