class

lee jae hwan·2022년 7월 27일

javascript

목록 보기
52/107

모던 자바스크립트에 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(); // 안녕하세요.

클래스도 클로저로 사용가능하다.

0개의 댓글