본문 바로가기
Front End/JavaScript

[JS] Object-Oriented Programming (OOP)

by 옐 FE 2021. 6. 16.

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를 통해 그 값에 접근할 수 있다.

댓글