We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

ECMAScript 2015 (ES6) より、オブジェクトイニシャライザのメソッド定義のための短い構文が導入されています。これは、メソッドの名前に割り当てられた関数の省略形です。

構文

var obj = {
  property( parameters… ) {},
  *generator( parameters… ) {},
// 算出されたキーも使用可能:
  [property]( parameters… ) {},
  *[generator]( parameters… ) {},
// ES5 getter/setter 構文との比較:
  get property() {},
  set property(value) {}
};

説明

簡略構文は、ECMAScript 第 5 版で導入された gettersetter 構文に似ています。

次のコードを例にすると:

var obj = {
  foo: function() {},
  bar: function() {}
};

これを以下のように短縮することができます:

var obj = {
  foo() {},
  bar() {}
};

注記: 簡略構文では、無名関数 (…foo: function() {}… のような) の代わりに名前付き関数を使用します 。名前付き関数は関数の本体から呼び出すことができます (無名関数では、参照するための識別子がないため不可能です)。詳しくは function をご覧ください。

短縮形ジェネレータメソッド

Generator methods は同様に簡略構文を使用して定義することができます。簡略構文ではジェネレータプロパティ名の前にアスタリスク (*)が 必要です。すなわち、* g(){} は動作しますが、g *(){} は動作しません。

// 名前付きプロパティを使用 (ES6 より前)
var obj2 = {
  g: function*() {
    var index = 0;
    while(true)
      yield index++;
  }
};

// 簡略構文を使用して同じオブジェクトを生成
var obj2 = { 
  * g() {
    var index = 0;
    while(true)
      yield index++;
  }
};

var it = obj2.g();
console.log(it.next().value); // 0
console.log(it.next().value); // 1

メソッド定義はコンストラクタブルではない

すべてのメソッド定義はコンストラクタではないため、インスタンス化しようとすると TypeError が発生します。

var obj = { 
  method() {},
};
new obj.method; // TypeError: obj.method is not a constructor

var obj = { 
  * g() {} 
};
new obj.g; // TypeError: obj.g is not a constructor (ES2016 で変更)

簡単なテストケース

var obj = {
  a : "foo",
  b(){ return this.a; }
};
console.log(obj.b()); // "foo"

計算されたプロパティ名

簡略構文は計算されたプロパティ名もサポートします。

var bar = {
  foo0 : function (){return 0;},
  foo1(){return 1;},
  ["foo" + 2](){return 2;},
};

console.log(bar.foo0()); // 0
console.log(bar.foo1()); // 1
console.log(bar.foo2()); // 2

仕様

仕様 ステータス コメント
ECMAScript 2015 (6th Edition, ECMA-262)
Method definitions の定義
標準 初期定義。
ECMAScript 2016 (ECMA-262)
Method definitions の定義
標準 ジェネレータメソッドも [[Construct]] トラップを持つべきではなく、new とともに使用すると例外が発生するように変更。
ECMAScript Latest Draft (ECMA-262)
Method definitions の定義
ドラフト  

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
メソッド定義簡略 39 34 (34) 未サポート 26 未サポート
ジェネレータメソッドはコンストラクタブルではない (ES2016) ? 43 (43) ? ? ?
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
メソッド定義簡略 未サポート 未サポート 34.0 (34) 未サポート 未サポート 未サポート
ジェネレータメソッドはコンストラクタブルではない (ES2016) ? ? 43.0 (43) ? ? ?

SpiderMonkey固有のメモ

  • SpiderMonkey 38 (Firefox 38 / Thunderbird 38 / SeaMonkey 2.35) 以前では、"get" と "set" がジェネレータメソッドに対して無効な名前でした。これは バグ 1073809 で修正されています。
  • SpiderMonkey 41 (Firefox 41 / Thunderbird 41 / SeaMonkey 2.38) より前のバージョンでは、メソッド定義で波括弧が必須ではありませんでした。バージョン 41 より ES6 仕様に準拠して波括弧が必須になり、省略すると SyntaxError が発生します (バグ 1150855)。
    var o = {x() 12}; // SyntaxError
  • ジェネレータメソッドのみコンストラクタとする制限は、SpiderMonkey 41 (Firefox 41 / Thunderbird 41 / SeaMonkey 2.38) で実装しました。バグ 1059908 および バグ 1166950 をご覧ください。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: karakol2017, ambi, yyss, shide55
最終更新者: karakol2017,