JavaScript 의 Class는 ES6에 추가된 스펙이다.

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

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

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

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

• 위와 같이 클래스로 작성했을 때의 차이를 알아보자

클래스로 작성한 문법을 이용해 객체를 생성하게 되면 클래스 내부의 showName() 메소드는
User2의 프로토타입에 저장되게 된다. 따라서 위에서 mike객체는 객체 내부에 showName() 메소드가 있지만 , tom객체는 내부의 프로토타입에 showName() 메소드가 저장되어 있다.

--> 동일하게 만드려면

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

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

클래스를 쓰는 이유

• 그렇다면 클래스를 왜 사용하는 걸까 ? prototype을 조금 더 편하게 작성하고자 ???

클래스와 달리 일반 생성자 함수를 사용하게 되면 객체를 생성할 때
new 생성자함수("","") 이런식으로 작성하지 않고 new 를 빼게되면 undefined를 출력하는데,
이는 분명히 개발자의 실수임에도 오류를 즉시 잡아낼 수 없다.

그러나 클래스는 new 연산자 없이 객체를 생성하게 되면 바로 오류를 출력해주기 때문에 기존 생성자 함수의 문제를 해결해준다고 볼 수 있다.

클래스에서의 상속

• 클래스에서는 상속시에 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");

-> 해당 작성을 통해서 Bmw 내부 프로토타입에 park() 메소드가 저장되고 , 상속된 prototype에 drive() 와 stop() 메소드가 저장된다.

클래스에서 메소드 오버라이딩

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);
      	this.navigation = 1;
    }
	park() {
     	console.log("PARK"); 
    }
  	stop() {
      	//super.stop();
    	console.log("OFF");
    }
}

const z4 = new Bmw("blue");

• 해당 코드에서 z4.stop()을 실행하면 OFF를 출력한다.

• 만약 부모의 메소드를 그대로 사용하고 싶다면 super 키워드를 이용한다.

• 만약 상속한 자식 클래스에서 생성자 함수를 오버라이딩 한다면 꼭 super를 통해 부모의 생성자 함수를 실행시켜야 오류가 발생하지 않는다.

그러나 위와 같이 생성자 함수를 실행해도 color 프로퍼티는 undefined 로 지정되는데 이를 해결하려면,
자식의 생성자 함수에서 마찬가지로 color 를 인자로 받아 부모의 생성자 함수로 color 를 넘겨주어야 한다.