클래스 class / ES2015 & ES6 - 06

자바스크립트의 클래스는 프로토타입 기반으로 동작한다

 

자바스크립트의 프로토타입 (prototype) 이해

프로토타입 뜻은 무언가를 만드는 과정에서 시험용으로 만들어보는 것을 의미함

자바스크립트는 클래스라는 개념이 없어서 기존 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어이다.

 

자바스크립트의 클래스는 프로토타입 기반 문법을 보기 좋게 클래스롤 바꾼 것

 

// 기존 생성자 함수

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 와 동일하게 사용되도록 변경

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);

// ES6 Class 사용
class User2 {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    showName(){
        console.log(this.name);
    }
}
const tom = new User2("Tom", 19);


// 문법만 간단한게 바뀐게 아니고
for(const p in mike){
    console.log(p);
}
// 하면 name, age, showName을 모두 보여주는데 
// 프로토타입에 포함된 프로퍼티를 모두 보여주고 
// 객체가 가진 프로퍼티만 쓰기 위해서는 다른 과정을 거쳐야함 
// 그러나 class를 사용하면 name, age만 나타남
for(const p in tom){
    console.log(p);
}

 

// 상속 extends

class Car {
    constructor(color){
        this.color = color;
        this.wheels = 4;
    }
    drive() {
        console.log("drive..");
    }
    stop(){
        console.log("STOP");
    }
}

class WW extends Car {
    park(){
        console.log("PARK");
    }
    stop(){
        super.stop(); // 메소드 오버라이딩(method overriding) 이렇게 사용하면 부모의 stop 사용함
        console.log("OFF"); // 동일하면 덮어씌워짐
    }
}

const z4 = new WW("blue");
console.log(z4);
console.log(z4.drive());