Javascript JS 클래스(class)

Class - ES6 에 추가된 스펙

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  showName() {
    console.log(this.name);
  }
}

const user1 = new User("Mike", 30);

 

extends - 다른 클래스 상속

class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  driver() {
    console.log("drive...");
  }
  stop() {
    console.log("STOP !");
  }
}

class Bmw extends Car {
  park() {
    console.log("PARK");
  }
}

const z4 = new Bmw("blue");

 

메소드 오버라이딩

// 메소드 오버라이딩
// 부모
class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
    console.log("drive...");
  }
  stop() {
    console.log("STOP !");
  }
}

// 자식
class Bmw extends Car {
  park() {
    console.log("PARK");
  }
  stop() {
    // super.stop(); <== 부모의 stop() 메소드 오버라이딩을 사용하기 위한 방법
    console.log("OFF");
  }
}

const z4 = new Bmw("blue");
console.log(z4.stop()); // 자식 stop() 메소드로 덮어써짐 결과, OFF 부모의 것을 그대로 사용하려면 super를 사용해야함

 

생성자 오버라이딩

// 메소드 오버라이딩
// 부모
class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
    console.log("drive...");
  }
  stop() {
    console.log("STOP !");
  }
}

// 자식
class Bmw extends Car {
  constructor(color) {
    super(color); // 클래스 constructor는 {} 빈 객체를 만들고 this가 이를 가리킨다. 
             // 반면 자식 클래스는 {} 빈 객체를 만들고 this로 가리키는 작업을 하지 않는다.
             // 항상 super();를 통하여 부모 클래스에 오버라이딩 해줘야 정상 작동한다. 
    this.navigation = 1;
  }
  park() {
    console.log("PARK");
  }
}

const z4 = new Bmw("blue");

 

자식 클래스 내에 constructor가 없어서 생략 되었을때 동작 방식

// 메소드 오버라이딩
// 부모
class Car {
  constructor(color) {
    this.color = color;
    this.wheels = 4;
  }
  drive() {
    console.log("drive...");
  }
  stop() {
    console.log("STOP !");
  }
}

// 자식
class Bmw extends Car {
  /*
  constructor가 없어 생략하지만 동작은 아래처럼 반드시 오버라이딩되어 있는거 처럼 동작한다.
  constructor(...args) {
    super(...args);
  }
  */
  park() {
    console.log("PARK");
  }
}

const z4 = new Bmw("blue");