ES6 Class 정리

28 Jul 2017

JavaScript에도 Class가 있다고 썼지만 사실 JavaScript에서 Class는 함수의 한 종류이다. 따라서 함수처럼 선언과 표현식이 존재한다.

클래스 선언

클래스가 함수의 한 종류이기는 하나, 함수의 모든 특성을 공유하진 않는다. 명확한 차이 중에 하나가 호이스팅이 일어나지 않는다는 것이다. 따라서 선언 전에 클래스를 사용하려고 하면 ReferenceError가 발생한다. 반드시 먼저 선언을 하고 사용해야 한다. 선언은 아래처럼 할 수 있다.

class Humanbeing {
    constructor(name) {
        this.name = name;
    }
}

클래스 표현식

클래스를 정의하는 또 다른 방법이다. 클래스는 익명일 수도 있고 이름이 있을 수도 있다.

var Humanbeing = class {
    constructor(name) {
        this.name = name;
    }
}

var Humanbeing = class Humanbeing {
    constructor(name) {
        this.name = name;
    }
}
// 위의 코드처럼 named 클래스인 경우, 클래스 이름을 밖에서도 사용할 수 있는 것은 아니다.
// 기명함수와 마찬가지로 해당 클래스 body에서만 활용할 수 있다.  

클래스 선언과 표현식의 body는 strict mode에서 실행되니 참고.

클래스 멤버

Constructor (생성자)

클래스로 만든 객체를 생성하고 초기화하는 특수한 메소드로서 한 클래스당 오직 한 개만 존재할 수 있다. 그 이상을 포함할 경우, SyntaxError가 발생한다.

Super

부모의 생성자를 호출하는 키워드.

class Ancestor {
    constructor(species) {
        this.species = species;
    }
    
    sing() {
        console.log(this.species+ ' can\'t sing well');
    }
}

class Humanbeing extends Ancestor {
    sing() {
        super.sing();
    }
}

클래스 상속 (sub classing)

extends 키워드를 활용하여 먼저 만든 클래스를 상속할 수 있다.

class Monkey {
    constructor(name) {
        this.name = name;
    }
    walk() {
        console.log(this.name + ' can walk');
    }
}

class Humanbeing extends Monkey {
    run() {
        console.log(this.name + ' can also run!');
    }   
}

[참고] MDN Classes (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes)