メソッド定義

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

構文

var obj = {
  property( parameters… ) {},
  *generator( parameters… ) {},
  async property( parameters… ) {},
  async* generator( parameters… ) {},

  // 算出されたキーも使用可能:
  [property]( parameters… ) {},
  *[generator]( parameters… ) {},
  async [property]( 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 メソッドは同様に簡略構文を使用して定義することができます。簡略構文ではジェネレータープロパティ名の前にアスタリスク (*)が 必要です。すなわち、* 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

Async メソッド

Async メソッドは短縮形を使用して定義することができます。

// 名前付きプロパティ
var obj3 = {
  f: async function () {
    await some_promise;
  }
};

// 簡略構文を使用して同じオブジェクトを生成
var obj3 = { 
  async f() {
    await some_promise;
  }
};

Async ジェネレーターメソッド

Generator メソッドasync 関数にすることができます。

var obj4 = {
  f: async function* () {
    yield 1;
    yield 2;
    yield 3;
  }
};

// 簡略構文を使用して同じオブジェクトを生成
var obj4 = {
  async* f() {
   yield 1;
   yield 2;
   yield 3;
  }
};

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

すべてのメソッド定義はコンストラクタではないため、インスタンス化しようとすると 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 の定義
ドラフト  

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイルサーバー
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung InternetNode.js
Method definitionsChrome 完全対応 39Edge 完全対応 ありFirefox 完全対応 34IE 未対応 なしOpera 完全対応 26Safari 完全対応 9WebView Android 完全対応 39Chrome Android 完全対応 39Firefox Android 完全対応 34Opera Android 完全対応 26Safari iOS 完全対応 9Samsung Internet Android 完全対応 4.0nodejs 完全対応 あり
Async generator methodsChrome ? Edge ? Firefox 完全対応 55IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Firefox Android 完全対応 55Opera Android ? Safari iOS 未対応 なしSamsung Internet Android ? nodejs 完全対応 10.0.0
完全対応 10.0.0
完全対応 8.10.0
無効
無効 From version 8.10.0: this feature is behind the --harmony runtime flag.
Async methodsChrome ? Edge ? Firefox 完全対応 52IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Firefox Android 完全対応 52Opera Android ? Safari iOS 未対応 なしSamsung Internet Android ? nodejs 完全対応 7.6.0
完全対応 7.6.0
完全対応 7.0.0
無効
無効 From version 7.0.0: this feature is behind the --harmony runtime flag.
Generator methods are not constructable (ES2016)Chrome ? Edge ? Firefox 完全対応 43IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Firefox Android 完全対応 43Opera Android ? Safari iOS 未対応 なしSamsung Internet Android ? nodejs ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

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 をご覧ください。

関連情報