클래스와 기본 문법

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. 위키백과

기본 문법

class MyClass {
  // 여러 메서드를 정의할 수 있음
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

// 사용시
const cls = new Myclass;

• 새로운 객체가 생성
• 넘겨받은 인수와 함께 constructor가 자동으로 실행된다.

클래스란

자바스크립트에서 클래스는 함수의 한 종류이다.

class User {
  constructor(name) { this.name = name; }
  sayHi() { alert(this.name); }
}

// User가 함수라는 증거
alert(typeof User); // function
class User {...} 문법 구조가 진짜 하는 일은 다음과 같습니다.

• 클래스와 동일한 이름의 (생성자)함수를 만든다. 함수 본문은 constructor와 동일하다. 만약 constuctor가 없으면 본문은 비워진 채로 함수가 만들어진다.
• 클래스의 메서드들은 Class.prototype에 저장한다.

class User {
constructor(name) { [this.name](<http://this.name/>) = name; }
sayHi() { alert([this.name](<http://this.name/>)); }
}

// 클래스는 함수입니다.
alert(typeof User); // function

// 정확히는 생성자 메서드와 동일합니다.
alert(User === User.prototype.constructor); // true

// 클래스 내부에서 정의한 메서드는 User.prototype에 저장됩니다.
alert(User.prototype.sayHi); // alert([this.name](<http://this.name/>));

// 현재 프로토타입에는 메서드가 두 개입니다.
alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi

클래스는 일반적인 편의 문법이 아니다.

1. class로 만든 함수엔 특수 내부 프로퍼티인 [[IsClassConstructor]]: true 이다.

   클래스 생성자를 new와 함께 호출하지 않으면 에러가 발생하는데 이 때 [[IsClassConstructor]]: true가 사용된다.

   class User {
     constructor() {}
   }
   
   alert(typeof User); // User의 타입은 함수이긴 하지만 그냥 호출할 수 없습니다.
   User(); // TypeError: Class constructor User cannot be invoked without 'new'
   
   

   클래스 생성자를 문자열로 형변환하면 'class…'로 시작하는 문자열이 되는데 이때도 [[IsClassConstructor]]: true가 사용된다.

   class User {
     constructor() {}
   }
   alert(User); // class User { ... }
   
   

2. 클래스의 prototype 프로퍼티에 추가된 메서드의 enumerable 플래그는 false이다.

3. 클래스 생성자 안 코드 전체엔 자동으로 엄격 모드가 적용된다.

클래스 표현식