该新特性属于 ECMAScript 2015(ES6)规范,在使用时请注意浏览器兼容性。
ECMAScript从ECMAScript6开始,引入了一种更简短的在对象初始器中定义方法的语法,这是一种把方法名直接赋给函数的简写方式。
语法
var obj = { property([parameters]) {}, get property() {}, set property(value) {}, * generator() {} };
简述
该简写语法与ECMAScript 5的getter和setter语法类似。
如下代码,
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中被修复了。