[ES 6] Class 구문과 상속

 

1. class 구문

 

 ES6의 클래스는 기존 모델에 단지 새롭게 추가된 구문일 뿐, 새로운 객체 지향 모델은 아니다. 단순히 생성자와 상속을 좀 더 간단하고 명확한 구문으로 다룰 수 있게 해주는 구문이다. 클래스는 사실은 함수이며 생성자로 사용한 함수를 생성하는 새로운 구문의 일원이다.

 

다음은 클래스를 선언하는 방법이다.

 

class User {

constructor(name, age) {
this._name = name;
}
}

let user = new User("유저");
console.log(user._name);

 

 User클래스를 생성 후 그 안에 constructor 메소드를 정의했다. 그리고 클래스의 새 인스턴스, 즉 name 프로퍼티가 있는 객체를 생성했다. 클래스 바디 안의 모든 코드는 기본적으로 strict 모드로 실행된다. 위 예제를 함수로 바꾸어 보자.

 

function User(name) {
this._name = name;
}

let user = new User("유저");
console.log(user._name);

 

위 둘다 typeof를 사용하여 콘솔을 찍어보면 function으로 나온다. 클래스는 함수이며 함수를 생성하는 신상 구문일 뿐이다. 다음 아래 좀 더 확장한 예제를 보자.

 

class User {

constructor(name, age) {
this._name = name;
this._age = age;
}

get name() {
return this._name;
}

set name(name) {
this._name = name;
}

printProfile() {
console.log(`이름 : ${this._name}, 나이 : ${this._age}`);
}
}

let user = new User("유저");
console.log(user.name);

 

클래스 안에 다른 메소드들을 선언했다. 클래스 바디 안의 모든 메소드들은 prototype 프로퍼티에 추가된다. 위 printProfile() 메소드를 함수 버전으로 선언을 하게 되면 아래와 같다.

 

User.prototype.printProfile = function() {
console.log(`이름 : ${this._name}, 나이 : ${this._age}`);
};

 

 

2. Class 상속

 

 Javascript에서의 상속 구현은 쉬운 일이 아니었다. 그래서 extends와 super 키워드를 사용하여 쉽게 사용 할 수 있게 되었다. ES6에서는 extends 절로 클래스가 다른 생성자의 정적/비정적 프로퍼티를 상속할 수 있게 하였다. super 키워드는 클래스의 constructor 메소드에서 부모 생성자를 호출하며, 클래스 메소드 내부에서 부모 생성자의 정적/비정적 메소드를 참조한다. 아래는 클래스의 아주 간단한 예제이다.

 

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

class B extends A{
constructor(a, b) {
super(a);
this.b = b;
}
}

 

 constructor 메소드 안에서는 super를 this보다 먼저 사용하지 않으면 예외가 발생한다. 또한 자식 클래스에 constructor 메소드가 없으면 부모 클래스의 constructor 메소드가 자동으로 호출된다.