자바스크립트 - 클래스(Class)

클래스

지금까지 비슷한 형태의 함수를 생성하기 위하여 생성자 함수를 사용했습니다.

클래스라는 것을 이용해 만들 수 있습니다.

클래스는 ES6에 추가된 속성입니다. 

 

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

 

어떤 점이 다른지 알아봅시다.

Class를 통해 정의된 내용을 객체로 생성하는 것은 동일합니다. 

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

 

 

그렇다면 클래스를 왜 사용하는 것일까요? prototype을 조금 더 편하게 작성하고자 사용하는 것일까요?

 

클래스 쓰는 이유

클래스와 달리 일반 생성자 함수를 사용하게 되면 객체를 생성할 때 

new를 빼게되면 undefined를 출력하는데

이는 분명히 개발자의 실수임에도 오류를 즉시 잡아낼 수 없습니다. 

그러나 클래스는 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");

console.log(z4.color, z4.wheels); //"blue", 4

해당 작성을 통해 Bmw 내부 프로토타입에 park()메소드가 저장되고,

상속된 prototype에 drive()와 stop()메소드가 저장됩니다.

 

 

 

메소드 오버라이딩

만약 car에서 정의한 메소드를 동일한 이름으로 bmw에서 정의하면 어떻게 될까요?

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

class Bmw extends Car{
    constructor(){
        super();
        this.navigation=1;
    }
    park(){
        console.log("PARK");
    }
    stop(){
        //super.stop();
        console.log("OFF");
    }
}

const z4 = new Bmw("blue");

z4.stop();

결과는 bmw에서 정의한 stop()이 나오게 됩니다. 

부모에서 정의한 stop()메소드를 사용하고 싶으면 super키워드를 사용합니다. 

위의 주석을 취소하고 다시 실행해보면 부모 메소드의 stop이 나오게 됩니다.

 

그럼 위의코드에서 아래의 코드를 추가해주어서 실행해보면 어떻게 될까요?

blue가 나올까요?

console.log(z4.color);

 

정답은

undefined가 나오게 됩니다. 

위를 해결할려면 자식의 생성자 함수 constructor() 함수에서 마찬가지로 color를 인자로 받아서

부모의 생성자 함수로 color를 넘겨주어야 합니다. 즉 아래의 코드로 수정해야합니다.

 

class Bmw extends Car{
    constructor(color){
        super(color);
        this.navigation=1;
    }
    park(){
        console.log("PARK");
    }
    stop(){
        //super.stop();
        console.log("OFF");
    }
}

constructor()에 인수로 color가 들어가고 super()에 인수로 color가 들어가며 됩니다. 

 

 

그럼 아까 우리가 보았던 위의 코드 중(클래스에서의 상속)에서는 왜 blue가 잘 나왔을까요? 이유는  bmw(자식클래스)에서 constructor를 정의하지 않았기 때문입니다. 

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

console.log(z4.color, z4.wheels); //"blue", 4

 

이럴때 자바스크립트에서는 어떻게 동작하나면

이렇게 동작합니다. constructor가 없으면 아래의 부분이 있는것처럼 행동합니다. 

그래서 자식생성자는 무조건 부모생성자를 호출해야합니다.

class Bmw extends Car{
    constructor(...args){
        super(color);
    }
    park(){
        console.log("PARK");
    }
    
}