从ECMAScript 2015开始,在对象初始器中引入了一种更简短定义方法的语法,这是一种把方法名直接赋给函数的简写方式。

语法

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的gettersetter语法类似。

如下代码:

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

现可被简写为:

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

注意:简写语法使用命名函数而不是匿名函数(如…foo: function() {}…)。命名函数可以从函数体调用(这对匿名函数是不可能的,因为没有标识符可以引用)。详细信息,请参阅function

生成器方法

生成器方法也可以用这种简写语法定义。使用它们时,

// 用有属性名的语法定义方法(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 方法也可以使用简写语法来定义。

// 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 生成器方法

生成器方法也能成为 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;
  }
};

方法定义不是构造函数

所有方法定义不是构造函数,如果您尝试实例化它们,将抛出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 (changed in 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

规范

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

浏览器兼容

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Method definitionsChrome Full support 39Edge Full support YesFirefox Full support 34IE No support NoOpera Full support 26Safari No support NoWebView Android Full support 39Chrome Android Full support 39Edge Mobile Full support YesFirefox Android Full support 34Opera Android Full support 26Safari iOS No support NoSamsung Internet Android Full support 4.0nodejs Full support Yes
Generator methods are not constructable (ES2016)Chrome ? Edge ? Firefox Full support 43IE No support NoOpera ? Safari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 43Opera Android ? Safari iOS No support NoSamsung Internet Android ? nodejs ?
Async methodsChrome ? Edge ? Firefox Full support 52IE No support NoOpera ? Safari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 52Opera Android ? Safari iOS No support NoSamsung Internet Android ? nodejs 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.
Async generator methodsChrome ? Edge ? Firefox Full support 55IE No support NoOpera ? Safari No support NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 55Opera Android ? Safari iOS No support NoSamsung Internet Android ? nodejs 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.

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.

参见