클래스

1. 일반적 생성자 함수

const User = function(name, age){
    this.name = name;
    this.age = age;
    this.showName = function () {
        console.log(this.name);
    }
}

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

2. Class

ES6에 추가된 스펙

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

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

constructor
객체를 만들어 주는 생성자 메서드

3. 생성자 vs Class

1. 코드의 편의성

생성자

객체 내부에 showName() 존재

class

Prototype 내부에 showName() 존재

생성자 함수로 Class와 동일하게 구현

const User = function(name, age){
    this.name = name;
    this.age = age;
    // this.showName = function () {
    //     console.log(this.name);
    // }
}

User.prototype.showName = function() {
    console.log(this.name);
}

2. 오류 확인

생성자

const mike = User("mike", 30);  //new 가 생략됐지만 오류 x

class

const tom = User2("Tom", 19);
// Class constructor User2 cannot be invoked without 'new'

3. 상속

extends

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");
    }
}

const z4 = new Bmw("blue")
console.log(z4)	

프로퍼티 확인
z4 -> Bmw -> Car

4.메소드 오버라이딩(method overriding)

동일한 이름의 메소드 선언

class Car {
    ...
    stop() {
        console.log("STOP!")
    }
}

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

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

새롭게 선언된 함수로 덮어씀

super

부모의 함수를 사용하고 싶은 경우

class Bmw extends Car {
    park () {
        console.log("PARK");
    }
   	stop() {
       super.stop(); //Car.stop()
       console.log("OFF")
    }
}

const z4 = new Bmw("blue")
z4.stop();
// STOP!
// OFF

5. 클래스 오버라이딩(overriding)

class Bmw extends Car {
    constructor (){
        this.navigation = 1;
    }
    park () {
        console.log("PARK");
    }
}

const z4 = new Bmw("blue")
//Must call super constructor in derived class before accessing 'this' or returning from derived constructor

extends 만들어진 자식 클래스는 항상
부모 클래스의 constructor를 실행해줘야함

class Bmw extends Car {
    constructor (color){
      	super(color);
        this.navigation = 1;
    }
    park () {
        console.log("PARK");
    }
}

자식 클래스에 constructor가 없는 경우

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

---- 자바스크립트가 아래의 코드 처럼 자동으로 실행----

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