方法定義

由於本文件沒有此語言的翻譯版本,您閱讀的是英文版的內容。 幫助我們翻譯這篇文章!

自 ECMAScript 2015 開始,引入了一種於物件初始器(objects initializers)中定義方法的簡短語法。是一個將函式指派予方法名稱的簡便方式。

語法

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

  // with computed keys:
  [property]( parameters… ) {},
  *[generator]( parameters… ) {},
  async [property]( parameters… ) {},

  // compare getter/setter syntax:
  get property() {},
  set property(value) {}
};

說明

這個簡短的語法和在 ECMAScript 2015 引入 getter 以及 setter 類似。

請看以下程式碼:

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

你可以把它縮減為:

var obj = {
  foo() {
    /* code */
  },
  bar() {
    /* code */
  }
};

產生器方法

產生器方法(Generator method)也可以透過簡短語法定義之。用的時候:

  • 簡短語法的星號(*)必須放在產生器方法的屬性名前面。也就是說 * g(){} 能動但 g *(){} 不行;
  • 非產生器方法的定義可能不會有 yield 關鍵字。也就是說過往的產生器函式動不了、並拋出SyntaxError。Always use yield in conjunction with the asterisk (*).

// Using a named property
var obj2 = {
  g: function* () {
    var index = 0;
    while (true)
      yield index++;
  }
};

// The same object using shorthand syntax
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 方法 也可以透過簡短語法定義。

// Using a named property
var obj3 = {
  f: async function () {
    await some_promise;
  }
};

// The same object using shorthand syntax
var obj3 = { 
  async f() {
    await some_promise;
  }
};

Async generator methods

Generator methods can also be async.

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

// The same object using shorthand syntax
var obj4 = {
  async* f() {
   yield 1;
   yield 2;
   yield 3;
  }
};

Method definitions are not constructable

All method definitions are not constructors and will throw a TypeError if you try to instantiate them.

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 (changed in ES2016)

範例

Simple test case

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

Computed property names

The shorthand syntax also supports computed property names.

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

規範

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Method definitions' in that specification.
Standard Initial definition.
ECMAScript 2016 (ECMA-262)
The definition of 'Method definitions' in that specification.
Standard Changed that generator methods should also not have a [[Construct]] trap and will throw when used with new.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Method definitions' in that specification.
Draft  

瀏覽器相容性

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Method definitionsChrome Full support 39Edge Full support 12Firefox Full support 34IE No support NoOpera Full support 26Safari Full support 9WebView Android Full support 39Chrome Android Full support 39Firefox Android Full support 34Opera Android Full support 26Safari iOS Full support 9Samsung Internet Android Full support 4.0nodejs Full support Yes
Async generator methodsChrome Full support 63Edge No support NoFirefox Full support 55IE No support NoOpera Full support 50Safari No support NoWebView Android Full support 63Chrome Android Full support 63Firefox Android Full support 55Opera Android Full support 46Safari iOS No support NoSamsung Internet Android Full support 8.0nodejs Full support 10.0.0
Full support 10.0.0
Full support 8.10.0
Disabled
Disabled From version 8.10.0: this feature is behind the --harmony runtime flag.
Async methodsChrome Full support 55Edge Full support 15Firefox Full support 52IE No support NoOpera Full support 42Safari No support NoWebView Android Full support 55Chrome Android Full support 55Firefox Android Full support 52Opera Android Full support 42Safari iOS No support NoSamsung Internet Android Full support 6.0nodejs Full support 7.6.0
Full support 7.6.0
Full support 7.0.0
Disabled
Disabled From version 7.0.0: this feature is behind the --harmony runtime flag.
Generator methods are not constructable (ES2016)Chrome Full support 42Edge Full support 13Firefox Full support 43IE No support NoOpera Full support 29Safari No support NoWebView Android Full support 42Chrome Android Full support 42Firefox Android Full support 43Opera Android Full support 29Safari iOS No support NoSamsung Internet Android Full support 4.0nodejs ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.

參見