클래스 (Class)

ES6에 추가된 스펙
class를 사용하고 내부에 객체를 만들어주는 생성자 메서드 constructor가 있음
new를 통해 호출하면 자동으로 실행

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)

mike는 객체 내부에 showName이 있고
tom은 프로토타입 내부에 showName이 있음

사용법은 동일함 ↓

mike.showName();
tom.showName();

생성자 함수에서 class와 동일하게 동작하게 만들기

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

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

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

new 차이점

new를 적지않으면 오류 없이 undefined 만 출력

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

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

const mike = User("mike", 30); * User 앞에 new 있어야함

Class 문법은 new 없이 실행이 불가(TypeError)

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

const tom = User2("tom", 19) * User 앞에 new가 있어야함

for in문 사용시 차이점

mike for in문 ↓

tom for in문 ↓

for in문은 prototype에 포함된 property들을 다 보여주고
객체가 가지고 있는 property만 감별하기 위해
hasOwnProperty를 사용해야 했음
class의 매서드는 for in문 에서 제외됨

상속 (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")

(진심 뭔소린지 그냥 상속된다는걸 보여주는 건가..?)

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

동일한 이름으로 메소드를 정의하게 되면 덮어 쓰게 됨

class Bmw extends car {
	park() {
    	console.log("PARK");
    }
    stop() { 
	    console.log("OFF"); * stop을 덮어쓰게 됨  -> OFF 출력
    }
}

만약 부모의 메소드를 그대로 사용하면서 확장하고 싶다면?

SUPER

class Bmw extends car {
	park() {
    	console.log("PARK");
    }
    stop() {
    	super.stop(); * 이렇게 사용하게되면 부모인 car의 stop을 사용하게 됨
	    console.log("OFF"); * stop을 덮어쓰게 됨  -> OFF 출력
    }
}

결과

생성자 오버라이딩 (overriding)

class의 constructor는 빈 객체를 만들어주고 this로 이 객체를 가르키게 됨
반면 extend를 써서 만든 자식 class는 빈 객체가 만들어지고 this에 할당하는 이 작업을 건너 뜀
그래서 항상 super 키워드로 부모클래스의 constructor를 실행해줘야함

class Bmw extends car {
	constructor(*color){ *자식 클래스의 컨스트럭터 에 동일한 인수를 받는 작업을 해줘야함 
    	super(*color);
    	this.navigation = 1;
    }
	park() {
    	console.log("PARK");
    }
}