[JS] Javascript ES6 Class , extends 예시코드

[JS] 자바스크립트 ES6 Class , extends 예시코드

ES6에 도입된 Class에 대해 예시코드를 통해 알아보자. 

@ Class 예시코드

class User {
  //constructor : 값을 초기화 해준다.
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  showName() {
    console.log(`이름 : ${this.name} 나이 : ${this.age}`);
  }
}

const tom = new User("Tom", 19);

tom.showName(); // 이름 : Tom 나이 : 19

console.log(tom);
/* showName이 Prototype에 할당된다.
▼User {name: 'Tom', age: 19}
 age: 19 
 name: "Tom"
▼[[Prototype]]: Object
  ▶constructor: class User
  ▶showName: ƒ showName()
  ▶[[Prototype]]: Object
*/

@ extends 예시코드 

class Bmw extends Car {
  /*
    constructor가 없을 경우에는 내부적으로, 아래와 같이 처리된다.
    constructor(...args){
      super(...args)
    } 
    자식 클래스 생성자에 값을 추가하기 위해서는 아래와 같이 작성해주어야 한다.
  */

  // 생성자 오버라이딩 : super()를 사용해 부모 생성자를 가져와야한다.
  // 부모클래스의 매개변수를 사용하기 위해서는 constructor와 super에 매개변수를 넣어주어야 한다.
  constructor(color){
    super(color);
    this.navigation
  }

  park() {
    console.log("PARK");
  }
  stop() {
    console.log("OFF"); // 메소드 오버라이딩 : 부모 메소드를 덮어쓴다.
  }
  parent() {
    super.stop(); // super : 부모의 메소드(stop)를 호출한다.
    this.stop(); // this : 현재 메소드(stop)를 호출한다.
  }
}

const z4 = new Bmw("blue");
console.log(z4.stop()); // OFF
console.log(z4.parent());