모던 자바스크립트 튜토리얼 part1 - 9.1

9.1 Class basic syntax

class User {

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

  sayHi() {
    alert(this.name);
  }

}

// Usage:
let user = new User("John");
user.sayHi();

위 코드에서 이름은 constructor 이지만, new User("John")로 객체를 생성하면 자동으로 해당 메소드가 동작한다는 사실을 기억해두자. Java와 조금 다른 점이다. 

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

// class is a function
alert(typeof User); // function

// ...or, more precisely, the constructor method
alert(User === User.prototype.constructor); // true

// The methods are in User.prototype, e.g:
alert(User.prototype.sayHi); // the code of the sayHi method

// there are exactly two methods in the prototype
alert(Object.getOwnPropertyNames(User.prototype)); // constructor, sayHi

 

Not just a syntactic sugar

클래스는 아래처럼 class 키워드를 쓰지 않고도 만들 수 있는 것처럼 보인다. 하지만, 분명한 차이가 있기 때문에 주의해야한다.

• 내부적으로 [[IsClassConstructor]]: true 송성이 생성된다. 이 속성 때문에 다르게 취급?되는 경우가 많다.
• enumerable 플래그(?)가 있다. for..in에 의해 반복될 수 없다.
• 항상 use strict 모드에 있다. 

함수와 비슷하게 선언할 수 있다.

let User = class {
  sayHi() {
    alert("Hello");
  }
};

 

만약 class에 이름을 붙였다면, 해당 클래스 내부에서만 표시될 수 있다.

// "Named Class Expression"
// (no such term in the spec, but that's similar to Named Function Expression)
let User = class MyClass {
  sayHi() {
    alert(MyClass); // MyClass name is visible only inside the class
  }
};

new User().sayHi(); // works, shows MyClass definition

alert(MyClass); // error, MyClass name isn't visible outside of the class

Getters/setters

class User {

  constructor(name) {
    // invokes the setter
    this.name = name;
  }

  get name() {
    return this._name;
  }

  set name(value) {
    if (value.length < 4) {
      alert("Name is too short.");
      return;
    }
    this._name = value;
  }

}

let user = new User("John");
alert(user.name); // John

user = new User(""); // Name is too short.

Compute name[...]

내가 보기엔 굉장히... 어색한 방식으로 함수를 만들 수도 있다.

class User {

  ['say' + 'Hi']() {
    alert("Hello");
  }

}

new User().sayHi();

Class fields

class User {
  name = "John";

  sayHi() {
    alert(`Hello, ${this.name}!`);
  }
}

new User().sayHi(); // Hello, John!

아래 예시는 잘 이해가 안된다

class Button {
  constructor(value) {
    this.value = value;
  }

  click() {
    alert(this.value);
  }
}

let button = new Button("hello");

setTimeout(button.click, 1000); // undefined

// -----------------------

class Button {
  constructor(value) {
    this.value = value;
  }
  click = () => {
    alert(this.value);
  }
}

let button = new Button("hello");

setTimeout(button.click, 1000); // hello