从ECMAScript2015(ES6)开始,引入了一种在初始化对象的时候,给对象定义方法的简约语法.为原来给一个函数定义一个方法名的键值对语法提供了一种简写语法.

语法

var obj = {
  property( parameters… ) {},
  *generator( parameters… ) {},
// also with computed keys:
  [property]( parameters… ) {},
  *[generator]( parameters… ) {},
// compare ES5 getter/setter syntax:
  get property() {},
  set property(value) {}
};

描述

这种简写的语法类似于ES5引入的 setter 和 getter语法

比如下面的代码:

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

现在你可以把他们简写成这样:

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

简写generator方法:

Generator methods也可以使用简写的语法.但是要注意,’‘必须在属性名的前面,就是说 ` 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

方法定义不是构造函数:

方法定义的结果不是构造函数,尝试实例化它会返回一个Type;

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

原文地址