Object-Oriented Programming (OOP) was developed with the goal of organizing code, to make it more flexible and easier to maintain (avoid 'spagetti code') - 최근에 SW 엔지니어링에서 가장 많이 쓰임. 죽 늘여놓는 코드를 쓰지 않고 정리할 수 있도록 해주며 유지보수를 쉽게 할 수 있다.
[3 Ways of implementing prototypical inheritance in Javascript]
1) Constructor function
2) ES6 Classes : 쓰이는 코드의 방식이 constructor function과 매우 흡사하다.
3) Object.create()
The Complete JavaScript Course 2021 : From Zero to Expert! # 224. Coding Challenge
CarCl의 child class 격인 EVCl를 새로이 작성하고
'charge' property를 private field가 되도록 수정하며,
class에 쓰인 methods를 체인으로 연결해서 쓰기
class CarCl {
constructor(make, speed) {
this.make = make;
this.speed = speed;
}
accelerate() {
this.speed += 10;
console.log(`${this.make} is going to ${this.speed}km/h`);
return this;
}
break() {
this.speed -= 5;
console.log(`${this.make} is going to ${this.speed}km/h`);
return this;
}
}
class EVCl extends CarCl {
#charge;
constructor(make, speed, charge) {
super(make, speed);
this #charge = charge;
}
chargeBattery(chargeTo) {
this.#charge = chargeTo;
}
accelerate() {
this.speed += 20;
this.#charge--;
console.log(
`${this.make} is going to ${this.speed}km/h, with a ${this.#charge}%`
);
return this;
}
}
'extends'를 이용해 CarCl를 이어 받았음을 알리고 constructor 안에서 EVCl이 가진 고유한 'charge' property를 쓰기 전에 super()를 먼저 작성한다.
private field로 사용하기 위해선 class 안에 정의하지 않은 property 앞에 '#' 를 붙여주고 constructor 안에서 재정의한다.
const rivian = new EVCl('Revian', 120, 23);
rivian.accelrate().accelrate().chargeBattery(80).accelrate().break()
각 methods에 return this;를 넣어주어 체인으로 연결해 쓸 수 있다.
private field에 들어간 '#charge'는 class의 밖에서 접근할 수 없으나, class 안에서 public field와 연결된 methods를 통해 그 값에 접근할 수 있다.
'Front End > JavaScript' 카테고리의 다른 글
[JS] Array Methods Practice (0) | 2021.06.30 |
---|---|
[JS] Avoid callback hell, Promise (0) | 2021.06.20 |
[JS] Constructor Function : Prototype chain (0) | 2021.06.15 |
[JS] ES6 Classes (0) | 2021.06.14 |
[JS] The Complete JavaScript Course 2021: From Zero to Expert! | # 165 (0) | 2021.06.08 |
댓글