[译]JS箭头函数三连问：为什么用、怎么用、什么时候用

在现代JS中最让人期待的特性就是关于箭头函数，用=>来标识。箭头函数有两个主要的优势：其一是很是简明的语法，另外就是直观的做用域和this的绑定。

由于这些优势，箭头函数比起其余形式的函数声明更加受欢迎。好比，受欢迎的airbnb eslint configuration库会强制使用JavaScript箭头函数建立匿名函数。

然而，就像世间万物同样，箭头函数有一些优势也有一些“缺点”，这就须要在使用的时候作一些权衡了。

学习如何权衡是使用好箭头函数的关键。在这篇文章中咱们将回顾箭头函数是怎样工做的，而后深刻探讨，实际代码中箭头函数是如何改进咱们代码的，以及一些箭头函数不推荐的状况。

什么才是箭头函数

JS的箭头函数大概就像python中的lambda(python定义匿名函数的关键字)和ruby中的blocks(相似于闭包)同样。 这些匿名函数都有他们特殊的语法：首先接收必定数目的参数，而后在定义它们的函数的做用域或就近做用域中执行。

接下来咱们将详细探讨这些。

箭头函数的语法

箭头函数有一个大致的结构，同时也有不少的特殊状况能够简化。 核心的结构以下：

(argument1, argument2, ... argumentN) => {
    // function body
}
复制代码

在括号里面有一系列的参数，接着跟着一个箭头符号=>，最后是函数体。这跟传统的函数很相像，只是咱们省略了function关键字，而且添加了一个=>在参数后面。

而且，这里也有不少种状况，让箭头函数结构变得更加的简洁。

首先，若是函数体里面是一个单独的表达式，你能够省略大括号直接将表达式写在一行，而且表达式的结果也将会被函数直接返回。好比：

const add = (a, b) => a + b;
复制代码

其次，若是这传入的是一个单独的参数，你也可省略参数部分的括号。好比：

const getFirst = array => array[0];
复制代码

如你所见，这样就看起来更加的简洁了，咱们也将在后面说明更多的特性。

高级语法

若是你了解这些高级语法以后将十分受用。

首先，若是你尝试在一行书写函数，可是返回的值倒是一个对象内容，你原想这样写：

(name, description) => {name: name, description: description};
复制代码

而问题就是这样的语法会引发歧义，会误觉得你在写一个函数的函数体。 若是想返回的是单个的对象，请用括号包装该对象：

(name, description) => ({name: name, description: description});
复制代码

封闭的上下文做用域

不像其余形式的函数，箭头函数并无他们本身的执行上下文。实际上，这就意味着代码中的this和arguments都是继承自他们的父函数。

好比，比较下面箭头函数和传统函数的区别：

const test = {
  name: 'test object',
  createAnonFunction: function() {
    return function() {
      console.log(this.name);
      console.log(arguments);
    };
  },
  createArrowFunction: function() {
    return () => {
      console.log(this.name);
      console.log(arguments);
    };
  }
};
复制代码

咱们有一个有两个方法的对象，每一个方法都返回了一个匿名函数。区别在于第一个方法里面用了传统的函数表达式，后面的用了箭头函数表达式。若是咱们在传入一样的参数运行，咱们获得了两个不一样的结果。

const anon = test.createAnonFunction('hello', 'world');
//返回匿名函数
const arrow = test.createArrowFunction('hello', 'world');
anon();
//undefined
//{}
// this->window
arrow();
//test object
//object { '0': 'hello', '1': 'world' }
//this->test
复制代码

第一个匿名函数有本身的上下文（指向并不是test对象），当你调用的时候没有参考的this.name的属性，（注意：如今this指向window），也没有建立它时调用的参数。另外一个，箭头函数与建立它的函数有相同的上下文，让其能够访问参数arguments和对象。

箭头函数改进您的代码

传统lambda函数的主要用例之一，就是将函数用于数组的遍历，如今用JavaScript箭头函数实现。 好比你有一个有值的数组，你想去map遍历每一项，这时箭头函数是很是推荐的：

const words = ['hello', 'WORLD', 'Whatever'];
const downcasedWords = words.map(word => word.toLowerCase());
复制代码

一个及其常见的例子就是返回一个对象的某个值：

const names = objects.map(object => object.name);
复制代码

相似的，当用forEach来替换传统for循环的时候，实际上箭头函数会直观的保持this来自于父一级

this.examples.forEach(example => {
  this.runExample(example);
});
复制代码

Promise和Promise链

当在编写异步程序的时候，箭头函数也会让代码更加直观和简洁。

Promise能够更简单的编写异步程序。虽然你乐意去使用async/await，你也须要好好理解promise,由于这是他们的基础。

使用promise，仍然须要定义你的代码执行完成以后的回调函数。 这是箭头函数的理想位置，特别是若是您生成的函数是有状态的，同时想引用对象中的某些内容。

this.doSomethingAsync().then((result) => {
  this.storeResult(result);
});
复制代码

对象转换

箭头函数的另外一个常见并且十分有用的地方就是用于封装的对象转换。 例如在Vue.js中，有一种通用模式，就是使用mapState将Vuex存储的各个部分，直接包含到Vue组件中。 这涉及到定义一套mappers，用于从原对象到完整的转换输出，这在组件问题中实十分有必要的。 这一系列简单的转换,使用箭头函数是最合适不过的。好比：

export default {
  computed: {
    ...mapState({
      results: state => state.results,
      users: state => state.users,
    });
  }
}
复制代码

你不该该使用箭头函数的情景

这里有许多箭头函数不推荐的场景，这种状况之下不只没有帮助，并且还会形成没必要要的麻烦。

首先就是对象中的方法。这里有一个函数上下文的例子，对于咱们理解颇有帮助。 曾经流行一种趋势，用class类的语法和箭头函数，为其自动绑定方法。好比:事件方法可使用，可是仍然绑定在class类中。 看起来就像下面的例子:

class Counter {
  counter = 0;
  handleClick = () => {
    this.counter++;
  }
}
复制代码

在这种方法中,若是被一个点击事件函数调用了，它虽然不是Counter的上下文中，它仍旧能够访问实例的数据，这种方式的缺点不言而喻。

用这种方式的确提供了一种绑定函数的快捷方式，可是函数的表达形式多种多样，至关不直观。若是你尝试在原型使用这种对象，这将不利于测试，同时也会产生不少问题。 相反，推荐用一种常规的绑定方式，若有必要能够绑定在实例的构造函数中:

class Counter {
  counter = 0;
  handleClick() {
    this.counter++;
  }
  constructor() {
    this.handleClick = this.handleClick.bind(this);
  }
}
复制代码

深层调用

另外一种使用箭头函数会让你头疼的地方，就是你去用不少函数的组合调用，尤为是函数的深层调用。 简单的理由跟匿名函数同样，堆栈的追踪很复杂。

若是你的函数仅仅在一层之下，而不是深层的迭代，这倒不是什么问题。可是若是你将函数定义为箭头函数，而且在他们之间来回调用，当你调试bug的时候你将被代码困惑，甚至获得以下的错误信息：

{anonymous}()
{anonymous}()
{anonymous}()
{anonymous}()
{anonymous}()
//anonymous 匿名
复制代码

有动态上下文的函数

还有最有一种箭头函数会让你困惑的情形，就是this是动态绑定的时候。 若是你在如下情形使用箭头函数，那么this的动态绑定不会如期工做，而且你也会困惑这些代码为何不像预期那样工做，也会给你以后工做的人形成麻烦。 一些典型的例子：

• 事件的调用函数，this指向当前的目标属性
• 在jquery中，大多数时候this指向的是当前被选择的元素
• 在vue中，methods和computed中的this指向的是vue的组件。

固然你也能够在上面的情形之下谨慎的使用箭头函数。但特别是在jquery和vue的状况下, 这一般会干扰正常功能, 并使您感到困惑：为何看起来跟别人代码同样的代码就是不工做。

总结

箭头函数是JS语言中十分特别的属性，而且使不少情形中代码更加的变化莫测。尽管如此，就像其余的语言特性，他们有各自的优缺点。所以咱们使用它应该仅仅是做为一种工具，而不是无脑的简单的所有替换为箭头函数。

本文只是我的兴趣翻译，若有错误之处还望各位斧正。文章版权属于原文做者。

原文地址：codeburst.io/javascript-…