Class - ES6 에 추가된 스펙
class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
showName() {
console.log(this.name);
}
}
const user1 = new User("Mike", 30);
extends - 다른 클래스 상속
class Car {
constructor(color) {
this.color = color;
this.wheels = 4;
}
driver() {
console.log("drive...");
}
stop() {
console.log("STOP !");
}
}
class Bmw extends Car {
park() {
console.log("PARK");
}
}
const z4 = new Bmw("blue");
메소드 오버라이딩
// 메소드 오버라이딩
// 부모
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(); <== 부모의 stop() 메소드 오버라이딩을 사용하기 위한 방법
console.log("OFF");
}
}
const z4 = new Bmw("blue");
console.log(z4.stop()); // 자식 stop() 메소드로 덮어써짐 결과, OFF 부모의 것을 그대로 사용하려면 super를 사용해야함
생성자 오버라이딩
// 메소드 오버라이딩
// 부모
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는 {} 빈 객체를 만들고 this가 이를 가리킨다.
// 반면 자식 클래스는 {} 빈 객체를 만들고 this로 가리키는 작업을 하지 않는다.
// 항상 super();를 통하여 부모 클래스에 오버라이딩 해줘야 정상 작동한다.
this.navigation = 1;
}
park() {
console.log("PARK");
}
}
const z4 = new Bmw("blue");
자식 클래스 내에 constructor가 없어서 생략 되었을때 동작 방식
// 메소드 오버라이딩
// 부모
class Car {
constructor(color) {
this.color = color;
this.wheels = 4;
}
drive() {
console.log("drive...");
}
stop() {
console.log("STOP !");
}
}
// 자식
class Bmw extends Car {
/*
constructor가 없어 생략하지만 동작은 아래처럼 반드시 오버라이딩되어 있는거 처럼 동작한다.
constructor(...args) {
super(...args);
}
*/
park() {
console.log("PARK");
}
}
const z4 = new Bmw("blue");
'Dev > JAVASCRIPT' 카테고리의 다른 글
Javascript JS async / await (0) | 2024.02.01 |
---|---|
Javascript JS 콜백함수 (callback) (0) | 2024.02.01 |
Javascript JS 상속, 프로토타입(prototype) (0) | 2024.01.31 |
Javascript JS call / apply / bind (0) | 2024.01.30 |
Javascript JS setTimeout / setInterval (0) | 2024.01.30 |