箭头函数

在现代JS中最让人期待的特性就是关于箭头函数，用=>来标识。箭头函数有两个主要的优点: 更简短的函数；更直观的作用域和this的绑定(不绑定this)因为这些优点，箭头函数比起其他形式的函数声明更受欢迎。比如，受欢迎的airbnb eslint configuration库会强制使用JavaScript箭头函数创建匿名函数。然而，箭头函数有优点，也有一些“缺点”。这就需要在使用的时候做一些权衡。下面就从为何用、怎么用、何时用，这个三部分做一些总结。 为何用？引入箭头函数有两个方面的作用：更简短的函数并且不绑定this更简短的函数var elements = ['h1', 'div', 'span', 'section'];elements.map(function(el) { return el.length; // 返回数组: [2, 3, 4, 7]});// 从上面的普通函数可以改写为如下的箭头函数elements.map((el) => { return el.length; // [2, 3, 4, 7]});// 当箭头函数只有一个参数时，可以省略参数的圆括号elements.map(el => { return el.length; // [2, 3, 4, 7]});// 当箭头函数体只有一个`return`语句时，可以省略`return`关键字和方法体的花括号elements.map(el => el.length); // [2, 3, 4, 7]// 在这个例子中，因为我们只需要`length`属性，所以可以使用参数结构// 需要注意的是字符串`"length"`是我们想要获得的属性名称，而`elLength`则只是个变量名，可以替换成任意合法的变量名elements.map(({ "length": elLength }) => elLength); // [2, 3, 4, 7]不绑定this在箭头函数出现之前，每个新定义的函数都有它自己的this值(在构造函数的情况下是一个新对象，在严格模式的函数调用中则为undefined，如果该函数被作为"对象方法"调用则为基础对象等)。而箭头函数并没有它自己的执行上下，实际上，这就意味着代码中的this和arguments都是继承它的父函数。 const obj = { name: 'test object', createAnonFunction: function() { return function() { console.log(this.name); return this; } }, createArrowFunction: function() { return () => { console.log(this.name); return this; } }}const anon = obj.createAnonFunction();anon(); // undefinedanon() === window // true const arrow = obj.createArrowFunction();arrow(); // 'test object'arrow() === obj // true第一个匿名参数有自己的上下文(指向的并非obj对象)，当被赋值给anon变量且调用时，this发生了改变，指向了window。另一个，箭头函数与创建它的函数有相同的上下文，故指向obj对象。 ...