Javascript ES 6メソッドサムネイル表示

Javascriptのメソッド宣言方式はES 5とES 6とは異なります.現在、ECMAScript仕様ではES 5メソッドは認められず、ES 6メソッドのみが認められている.
このレポートでは、2つの方法の違いを例で比較します.

メソッド簡略表示

1.ES 5メソッド表示

ES 5でメソッドを宣言するには、関数宣言式をproperty値として指定します.

// ES5
var obj = {
  name: 'Lee',
  // 프로퍼티 sayHi의 값으로 할당된 것은 일반 함수(constructor)로 정의된 함수이다.
  // 현재 ECMAScript 사양에서 메서드로 인정되지 않는다.
  sayHi: function() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // Hi! Lee

// ES5의 메서드 선언 방식은 현재 ECMAScript 사양에서는 일반 함수로 정의된다.
// 일반 함수는 constructor이므로 new로 인스턴스를 생성할 수 있다.
new obj.sayHi(); // sayHi {}

2.ES 6方法簡略表示

ES 6では、メソッドを宣言する際に、関数キーワードを省略するサムネイル表現を使用することができる.

現在ECMAScriptはES 6メソッドの略語表現のみを認めている.

// ES6 메서드 축약표현만 메서드로 인정된다.
const obj = {
  name: 'Lee',
  // 메소드 축약 표현
  sayHi() {
    console.log('Hi! ' + this.name);
  }
};

obj.sayHi(); // 일반함수 호출: Hi! Lee
// 메소드는 non-constructor이므로 생성자 함수로 호출할 수 없다.
new obj.sayHi(); // Uncaught TypeError: obj.sayHi is not a constructor