[Javascript] 클래스(Class)

지금까지 비슷한 형태의 객체를 생성하기 위해 생성자 함수를 사용했었다.

const User = function(name, age){
    this.name = name;
    this.age = age;
    this.showName = function(){
        console.log(this.name);
    };
};

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

 

클래스로도 비슷한 형태의 객체를 만들 수 있다. 클래스는 ES6에 추가된 스펙이다.

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

const tom = new User2("Tom", 10);

class라는 키워드를 사용하고 객체를 만들어주는 생성자 메서드인 constructor가 있다. new를 통해 호출하면 constructor가 자동으로 실행된다. showName()처럼 클래스 내에 정의한 메서드는 User2의 프로토타입에 저장된다.

mike는 객체 내부에 showName이 있고, tom은 프로토타입 내부에 showName이 있는 것을 확인할 수 있다.

 

지난 포스팅에서처럼 생성자 함수를 사용해서도 프로토타입 내부에 메서드를 선언할 수 있다.

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를 빼고 실행해보면

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

생성자 함수에서 User 객체가 반환하는 값이 없으므로 mike는 undefined이다. 개발자가 실수한 코드이지만 문제 없이 작동한다.

클래스의 경우 TypeError가 발생한다. 클래스는 new 없이 실행할 수 없다. 

---

상속

클래스에서 상속은 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)

Bmw 내부에 Car에서 정의한 메서드와 동일한 이름의 메서드가 존재하면 어떻게 될까?

class Car {
    // ...
    stop(){
        console.log("STOP!");
    }
}

class Bmw extends Car {
	//...
	stop(){
    	console.log("OFF");
    }
}

const z4 = new Bmw("blue");

Bmw에 있는 메서드가 Car에 있는 메서드를 덮어쓰게 된다.

 

부모 클래스의 메서드를 그대로 사용하면서 확장하고 싶다면 super 키워드를 사용하면 된다.

class Car {
    //...
    stop(){
        console.log("STOP!");
    }
}

class Bmw extends Car {
	//...
	stop(){
        super.stop();
    	console.log("OFF");
    }
}

const z4 = new Bmw("blue");

---

생성자 오버라이딩(constructor overriding)

class Car{
    constructor(color){
        this.color = color;
        this.wheels = 4;
    }
    // ...
}

class Bmw extends Car{
    constructor(color){
        super(color);
        this.navigation = 1;
    }
    // ...
}

const z4 = new Bmw("blue");

클래스의 생성자는 빈 객체로 만들어지고 this로 이 객체를 가리키게 되는데, 자식 클래스의 생성자는 이 작업을 건너뛰기 때문에 constructor을 사용하기 전에 super 생성자를 반드시 먼저 호출해야한다.

 

자식 클래스에 생성자가 없다면 다음처럼 동작한다.

class Bmw extends Car {
    constructor(...args){
        super(...args);
    }
    // ...
}