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

글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다.!

 

 

ES6에서 추가된 클래스를 알아보겠습니다.

 

객체를 만들 때는 생성자 함수를 통해 객체를 생성하고 프로토타입을 이용하여 메서드를 만들었습니다.

 

생성자 함수를 사용하면서 함수와 혼동되어서 조금 불편했었습니다.

 

클래스는 명확하게 표현하여 객체를 파악하고 간단하게 객체를 만들 수 있습니다.

 

클래스도 함수와 마찬가지로 선언문과 표현식 2개를 사용할 수 있습니다.

 

클래스의 표현

첫 번째로 클래스 선언문입니다.

class A {
    constructor(n) {
        this.n = n;
    }

    show() {
        console.log("값: "+ this.n);
    }
}

let a = new A(10);
a.show();

두 번째로 클래스 표현식입니다.

let B = class {
    constructor(n) {
    	this.n = n;
    }
    
    show() {
    	console.log("값:" + this.n);
    }
}

let b = new B(10);
b.show();

class 옆에는 해당 클래스의 이름을 뜻합니다.

 

클래스 표현식에서 클래스 이름을 사용하지 않으면 변수의 이름이 클래스의 이름이 됩니다. 표현식에서 이름을 지정하면 클래스 안에서만 클래스 이름을 사용하여 참조할 수 있습니다.

 

클래스에는 constructor 메서드 생성자 메서드가 있어야 합니다. 이 생성자 메서드는 객체를 생성할 때 프로퍼티의 초기화를 담당합니다. 

 

그 후 해당 객체에서 사용할 메서드를 선언합니다. 이때 function 키워드를 생략할 수 있습니다. 이렇게 선언된 메서드들은 해당 객체의 prototype에 추가됩니다.

 

클래스에 프로퍼티에 직접접근을 방지하기 위해 사용되는 접근자 프로퍼티를 정의할 수 있습니다.

class A {
    constructor(n) {
        this.n = n;
    }
    
    get n() {
        return this._n;
    }

    set n(n) {
    	this._n = n;
    }

    show() {
        console.log("값: "+ this.n);
    }
}

let a = new A(10);
a.show(); // -> 값: 10

a.n = 100;
a.show(); // -> 값: 100

a.n = 1000;
console.log(a.n); // -> 1000

클래스에는 정적 메서드도 선언이 가능합니다.

class A {
    constructor(n) {
        this.n = n;
    }
    
    get n() {
        return this._n;
    }

    set n(n) {
    	this._n = n;
    }

    show() {
        console.log("값: "+ this.n);
    }
    
    static showStatic() {
        console.log("static 메서드");
    }
}

let a = new A(10);
a.show(); // -> 값: 10

a.n = 100;
a.show(); // -> 값: 100

a.n = 1000;
console.log(a.n); // -> 1000

A.showStatic(); // -> static 메서드

static 키워드를 붙이면 정적 메서드가 됩니다. 따라서 객체를 생성하지 않아도 해당 메서드를 사용할 수 있습니다.

 

객체가 생성되지 않았기에 객체에 있는 프로퍼티는 사용이 불가능합니다.

 

클래스의 특징

• 클래스는 함수처럼 호이스팅이 되지 않습니다. 따라서 클래스 선언을 미리 한 뒤 해당 클래스를 사용하여 객체를 만들 수 있습니다.
• 클래스 선언문은 같은 이름으로 선언이 불가능합니다.
• 클래스의 본문은 strict mode로 실행이 됩니다. 따라서 strict 모드의 특징을 알아야 합니다.

클래스 상속

클래스에서 상속은 extends 키워드를 사용합니다. extends 키워드를 클래스 이름 옆에 붙이고 상속할 클래스 이름을 적으면 됩니다.

 

class A {
    constructor(text) {
    	this.text = text
    }

    get text() {
    	return this._text;
    }

    set text(text) {
    	this._text = text;
    }

    show() {
    	console.log(this.text);
    }
}

let B = class extends A{
    constructor(text,subText) {
        super(text);
        this.subText = subText;
    }

    show() {
        super.show();
        console.log(this.text + this.subText);
    }
}

let b = new B("요거는","헤헤헿");
b.show();

자식 클래스에 추가하려는 프로퍼티가 있어서 constructor 메서드가 있다면 super 메서드를 먼저 호출해야 합니다. 

 

자식 클래스와 부모 클래스에 같은 메서드가 있다면 자식 클래스에 있는 메서드가 호출 됩니다. 자식 클래스에 있는 메서드로 재정의가 됩니다.

 

부모 클래스의 메서드를 사용하고 싶다면 super를 사용하여 호출할 수 있습니다. 

 

클래스 상속을 사용하는 이유?

클래스를 상속함으로써 기능을 부분적으로 추가하고 싶고 중복된 부분이 있을 때 중복된 부분을 재사용하여 불필요한 작업을 하지 않고 확장된 클래스를 만들기 위해 상속을 사용한다.

 

참고

모던 자바스크립트 입문(이소 히로시 지음, 서재원 옮김)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes#class_%EC%84%A0%EC%96%B8