JavaScript ES6箭头函数使用指南

function getVerifiedToken(selector) {
 return getUsers(selector)
  .then(function (users) { return users[0]; })
  .then(verifyUser)
  .then(function (user, verifiedToken) { return verifiedToken; })
  .catch(function (err) { log(err.stack); });
}

function getVerifiedToken(selector) {
 return getUsers(selector)
  .then(users => users[0])
  .then(verifyUser)
  .then((user, verifiedToken) => verifiedToken)
  .catch(err => log(err.stack));
}

const getVerifiedToken = selector => {
 return getUsers()
  .then(users => users[0])
  .then(verifyUser)
  .then((user, verifiedToken) => verifiedToken)
  .catch(err => log(err.stack));
}

const getVerifiedToken = selector =>
 getUsers()
  .then(users => users[0])
  .then(verifyUser)
  .then((user, verifiedToken) => verifiedToken)
  .catch(err => log(err.stack));

const emptyObject = () => {};
emptyObject(); // "htmlcode">

const emptyObject = () => ({});
emptyObject(); // {}


下面是一个更完整的例子：


function () { return 1; }
() => { return 1; }
() => 1
 
function (a) { return a * 2; }
(a) => { return a * 2; }
(a) => a * 2
a => a * 2
 
function (a, b) { return a * b; }
(a, b) => { return a * b; }
(a, b) => a * b
 
function () { return arguments[0]; }
(...args) => args[0]
 
() => {} // undefined
() => ({}) // {}


this


JavaScript中this的故事已经是非常古老了，每一个函数都有自己的上下文。以下例子的目的是使用jQuery来展示一个每秒都会更新的时钟：


$('.current-time').each(function () {
 setInterval(function () {
  $(this).text(Date.now());
 }, 1000);
});


当尝试在setInterval的回调中使用this来引用DOM元素时，很不幸，我们得到的只是一个属于回调函数自身上下文的this。一个通常的解决办法是定义一个that或者self变量：


$('.current-time').each(function () {
 var self = this;
 
 setInterval(function () {
  $(self).text(Date.now());
 }, 1000);
});


但当使用胖箭头函数时，这个问题就不复存在了。因为它不产生属于它自己上下文的this：


$('.current-time').each(function () {
 setInterval(() => $(this).text(Date.now()), 1000);
});


arguments变量
箭头函数与普通函数还有一个区别就是，它没有自己的arguments变量：


function log(msg) {
 const print = () => console.log(arguments[0]);
 print(`LOG: ${msg}`);
}
 
log('hello'); // hello


再次重申，箭头函数没有属于自己的this和arguments。但是，你仍可以通过rest参数，来得到所有传入的参数数组：


function log(msg) {
 const print = (...args) => console.log(args[0]);
 print(`LOG: ${msg}`);
}
 
log('hello'); // LOG: hello


关于yield
箭头函数不能作为generator函数使用。
最后


箭头函数是我最喜欢的ES6特性之一。使用=>来代替function是非常便捷的。但我也曾见过只使用=>来声明函数的代码，我并不认为这是好的做法，因为=>也提供了它区别于传统function，其所独有的特性。我个人推荐，仅在你需要使用它提供的新特性时，才使用它：
当只有一条声明（statement）语句时，隐式return。

需要使用到父作用域中的this。
本文详细说明了JavaScript ES6新特性之一的箭头函数的使用方法和一些注意事项，大家在使用时一定要注意，箭头函数用好了是非常快捷的，如果用不好的话也是非常令人头痛的