[译]ECMAScript 6中的方法定义

原文:http://ariya.ofilabs.com/2013/03/es6-and-method-definitions.html

---

在JavaScript的对象字面量中,属性值被设置成为一个函数是个很常见的做法.在各种JavaScript框架中,这种做法也很常见,尤其是用来设置构造函数的prototype属性对象的时候.在即将到来的ECMAScript 6中,引入了一种名叫方法定义(method definition)的新语法糖,相对于以前的完整写法,这种简写形式可以让你少写一个function键字.

在介绍"方法定义"之前,让我们快速的回顾一下访问器属性.访问器属性是个可以拥有setter和getter的属性,它是ECMAScript 5.1规范中的新特性,查看ES5中的11.1.5小节中的Object Initialiser了解详情.访问器属性的原理就是使用set和get标记来将一个对象属性和两个函数绑定起来,在那个属性被读取或被赋值时,绑定的函数会被分别调用,下面的代码演示了访问器属性的用法:

var BigLoco = {
  locoName: 'Gordon',
  get name() { return this.locoName; },
  set name(n) { this.locoName = n }
};
 
console.log(BigLoco.name); // 'Gordon'

在该代码中,我们的确声明了两个函数,但是没有使用function关键字.在ECMAScript 6中,这一语法得到了进一步的扩展,不光访问器属性,普通的值为函数的数据属性(通常称之为方法)也可以了.这个新语法就称之为"方法定义",查看最近的ES6草案中的第13.3小节了解详情.

看一下下面的这个ECMAScript 6代码片段,尤其要注意start和stop函数.

var SteamEngine = {
  color: 'blue',
  get name() { return 'Thomas' },
  start() { console.log('Hurry up!'); },
  stop() { console.log('Screech...! That was close.'); }
};
 
console.log('My name is', SteamEngine.name);
SteamEngine.start();
SteamEngine.stop();

如果我们把上面的代码转换成ES5代码,则转换结果会是这样:

var SteamEngine = {
  color: 'blue',
  get name() { return 'Thomas' },
  start: function() { console.log('Hurry up!'); },
  stop: function() { console.log('Screech...! That was close.'); }
};

我觉的这种新的语法糖很不错!