모던 자바스크립트에 class문법이 도입되었으며 생성자함수의 간편문법이 아님을 유의하자. 익스플로러는 지원하지 않는다.
클래스 기본문법
class MyClass {
// 여러 메서드를 정의할 수 있음
constructor() { ... }
method1() { ... }
method2() { ... }
method3() { ... }
...
}
constructor는 new에 의해 자동으로 호출되어 객체를 초기화 할 수 있다.
자바스크립트에서 class는 무엇인가?
객체가 아니며 함수의 일종이다.
class User{ ... } class문법이 스크립트에서 수행되는 과정
1. User라는 생성자함수가 만들어진다
2. [[IsClassConstructor]]:true 속성이 추가된다.
3. constructor메소드 내용이 생성자함수 본문으로 채워진다.
4. class에 정의된 메소드들은 User.prototype객체에 추가된다.
class User {
constructor(name) { this.name = name; }
sayHi() { alert(this.name); }
}
alert(typeof User); // function
User는 클래스로 정의되어 있을뿐 함수로 취급되어 지금까지 다뤄온 탁월한 유연성 그것이다.
생성자함수와 class의 차이
1. [[IsClassConstructor]]속성이 있으면 class로 반드시 new지시자가 사용되어야 한다.
2. 생성자함수에 정의된 프로퍼티는 객체마다 존재하여 객체용량이 커진다. class에 정의된 프로퍼티는 prototype에 정의되어 상속된다.
3. class는 엄격모드로 수행된다. constructor내부는 엄격모드가 적용된다.
let User = class MyClass {
sayHi() {
alert(MyClass);
}
};
new User().sayHi();
alert(MyClass);
클래스도 표현식문법이 가능하다. (익명, 기명 둘다 가능)
기명은 클래스내부에서만 사용가능하다.
function makeClass(phrase) {
return class {
sayHi() {
alert(phrase);
};
};
}
let User = makeClass("안녕하세요.");
new User().sayHi(); // 안녕하세요.
클래스도 클로저로 사용가능하다.