MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

方法的定义

该新特性属于 ECMAScript 2015(ES6)规范,在使用时请注意浏览器兼容性。

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

语法

var obj = {
  property([parameters]) {},
  get property() {},
  set property(value) {},
  * generator() {}
};

简述

该简写语法与ECMAScript 5的gettersetter语法类似。

如下代码,

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

现可被简写为:

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

生成器方法的简写语法

生成器方法也可以用这种简写语法定义。注意简写语法中的星号(*)必须出现在生成器名前,也就是说* 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

示例

简单示例

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

计算属性名

该简写方法也支持计算属性名(下例中的foo2方法):

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
Standard 初始定义

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Method definition shorthand 39 34 (34) 未实现 26 未实现
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Method definition shorthand 未实现 未实现 34.0 (34) 未实现 未实现 未实现

SpiderMonkey特定备注

  • 在SpiderMonkey 38 (Firefox 38 / Thunderbird 38 / SeaMonkey 2.35)之前,"get"和"set"是无效的生成器方法名。这在bug 1073809中被修复了。

参见

文档标签和贡献者

标签: 
 此页面的贡献者: teoli, fskuok
 最后编辑者: teoli,