클래스와 생성자 함수

1. 용도

둘다 동적으로 객체를 생성한다.
사용자에 의해서, 자유롭게, 많이 객체를 만들 수 있다는 의미다.
함수만들기 DIY 키트 같은 것.

하지만 차이점이 있다.

2. 기본 형식

클래스의 작성 방법

class Beverage{
constructor(name, price, isSeasonal){
this.name = name;
this.price = price;
this.isSeasonal = isSeasonal;
}
seasonMenu(){
if(this.isSeasonal){
console.log(시즌 상품입니다.);
}else{
console.log(상시 판매 중입니다.);
}
}
}

위의 클래스는 음료 객체를 생성하는 클래스다.
음료 이름, 가격, 시즌메뉴 여부를 정보로 넣을 수 있고,
시즌메뉴 여부가 true인지 false인지에 따라 다른 대답이 나오는 seasonMenu 메소드가 있다.

이번에는 생성자 함수.

function Beverage(name, price, isSeasonal){
this.name = name;
this.price = price;
this.isSeasonal = isSeasonal;
this.seasonMenu = function(){
if(this.isSeasonal){
console.log('시즌 상품입니다.');
}else{
console.log('상시 판매 중입니다.');
}
}
}

위의 클래스와 같은 내용이다.
이렇게 작성하는 것도 가능하다.

const Beverage = function(){
this.name = name;
this.price = price;
this.isSeasonal = isSeasonal;
this.seasonMenu = function(){
if(this.isSeasonal){
console.log('시즌 상품입니다.');
}else{
console.log('상시 판매 중입니다.');
}
}
}

차이점은
+클래스는 속성과 메소드를 구분해서 작성하지만, 생성자 함수는 그냥 한 블록 안에 다 작성한다.
+클래스는 메소드를 적을 때 일반 메소드를 작성하듯 하면 되지만, 생성자 함수는 메소드명 앞에 this를 붙여야 하고, 거기에 익명함수를 할당하는 방식이다.
+클래스는 상속할 때 extends를 사용하고, 생성자 함수는 prototype을 사용한다.

3. 상속 방법

클래스의 경우, extends를 사용한다.

class Latte extends Beverage{
	constructor(name, price, isSeasonal, mayHot){
    	super(name, price, isSeasonal);
        this.mayHot = mayHot;
        }
    wannaHot2() {
if (this.mayHot) {
  console.log("따뜻한 라떼 나왔습니다!");
}
}

생성자 함수의 경우, prototype을 사용한다.
그냥 객체, 생성자 함수 모두 이걸 쓴다.
함수를 담은 변수에만 사용 가능하다.

const Beverage = function(name, price, isSeasonal){
this.name = name;
this.price = price;
this.isSeasonal = isSeasonal;
this.seasonMenu = function(){
if(this.isSeasonal){
console.log('시즌 상품입니다.');
}else{
console.log('상시 판매 중입니다.');
}
}
}
///
const Tea = function(mayHot){
this.mayHot = mayHot;
this.wannaHot = function(){
if(this.mayHot){
console.log('따뜻한 차 나왔습니다!');
}else{
console.log('아이스티 나왔습니다!');
}
}
}
///
let cup = new Beverage('홍차', 4000, false);
let mugcup = new Tea(true);
///
mugcup.__proto__ = cup;
///
mugcup.seasonMenu();
mugcup.wannaHot();

자식 함수인 Tea인데도
부모 함수인 Beverage에 있는 메소드를 쓸 수 있게 된다.
본인이 갖고 있는 메소드인, wannaHot()도 쓸 수 있다.

mugcup.prototype.name = '홍차';

이렇게 속성/메소드를 따로따로 상속시키는 것도 가능하다.

Tea.__proto__ = Beverage;

이런 식으로는 못 쓴다.
원본 생성자 함수를 상속하는 게 아니라, 인스턴스끼리 상속시켜야 한다.

그리고 이렇게 상속받은 경우에는 부모 클래스의 속성과 메소드들을
볼 수 없다.
객체 메소드(Object.keys(), Object.values())로는 자식 객체
내부의 속성과 메소드들만 볼 수 있고,
for in 문을 써야 볼 수 있다.

4. 그 외의 차이

생성자 함수는 new 키워드 없이도 일반 함수로서 호출할 수 있지만,
클래스는 new 키워드가 있어야 호출이 가능하다.