Class

Class: ES6에 추가된 스펙

객체를 사용하기 위해 여태까지 생성자 함수를 사용하였다. 하지만 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);
}

const mike = new User("Mike", 30); // class를 사용하지 않고 만든 생성자 함수

• class를 사용한 코드

class User2 {
	constructor(name, age) {
    	this.name = name;
        this.age = age;
    } // 객체를 초기화 하기 위한 값 
    showName() {
    	console.log(this.name);
    } // User2 프로토타입에 저장이 됨
}

const tom = new User2("Tom", 19); // new 가 없을 경우 생성자 함수와 다르게 error!가 발생한다. , for in문 같은 경우 생성자 함수는 전부 나오는 반면 class는 함수에서 제한이 된다.

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

Class: 상속 (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");
    }
} // extends 를 이용하여 class 상속 

const z4 = new Bmw("blue");

Class: 메소드 오버라이딩

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(); // super 사용 (오버라이딩)
    	console.log("OFF"); // 출력하게 된다면 덮어쓰게 된다. (OFF로 출력)
    }
} 

const z4 = new Bmw("blue");

• 만약 부모 메소드 사용하고 싶을 시 super를 사용한다.

constructor 오버라이딩

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 쓰기 위해 사용!  , 값을 넣어줘야지 color 값 출력
        
    	this.navigation = 1;
    }
	park() {
    	console.log("PARk");
    }
} 

const z4 = new Bmw("blue");