JS箭头函数之为何用怎么用何时用

在现代 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(); // undefined
anon() === window // true
  
const arrow = obj.createArrowFunction();
arrow(); // 'test object'
arrow() === obj // true

第一个匿名参数有自己的上下文 (指向的并非 obj 对象)，当被赋值给anon 变量且调用时，this 发生了改变，指向了 window。另一个，箭头函数与创建它的函数有相同的上下文，故指向obj 对象。

通过 call 或者 apply 调用

由于箭头函数没有自己的 this 指针 ，通过call() 或者 apply() 方法调用一个函数时，只能传递参数(不能绑定 this)，它们的第一个参数会被忽略。

var adder = {
  base: 1,
  add: function(a) {
    var f = v => v + this.base;
    return f(a);
  },
  addByCall: function(a) {
    var f = v => v + this.base;
    var b = {base: 2};
    return f.call(b, a)
  }
}

adder.add(1); // 2
adder.addByCall(1); // 2

不绑定 arguments

箭头函数不绑定 Arguments 对象。因此，在本示例中，arguments只是引用了封闭作用域内的arguments:

function foo(n) {var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象，arguments[0]是 n
  return f();}

foo(1); // 2

在大多数情况下，使用剩余参数是相对使用 arguments 对象的更好选择。

function foo(arg) {var f = (...agrs) => args[0];
  return f(arg);
}
foo(1); // 1

function foo(arg1, arg2) {var f = (...args) => args[1];
  return f(arg1, arg2);
}
foo(1, 2); // 2

怎么用?

优化代码

比如你有一个有值的数组，你想去 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 链

当在编写异步编程时，箭头函数也会让代码更加直观和简洁。
这是箭头函数的理想位置，特别是如果您生成的函数是有状态的，同时想引用对象中的某些内容。

this.doSomethingAsync().then((result) => {this.storeResult(result);
});

对象转换

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

export default {
  computed: {
    ...mapState([
      'results',
      'users'
    ])
  }
}

何时用？(不推荐使用场景)

使用 new 操作符

箭头函数不能用作构造器，和 new 一起使用会抛出错误。

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

使用 prototype 属性

箭头函数没有 prototype 属性。

var Foo = () => {};
console.log(Foo.prototype); // undefined

使用 yield 关键字

yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作生成器。

深层调用

如果你将函数定义为箭头函数，并且在他们之间来回调用，当你调试 bug 的时候你将被代码困惑，甚至得到如下的错误信息：

{anonymous}(){anonymous}(){anonymous}(){anonymous}(){anonymous}() //anonymous

常见错误

返回对象字面量

记住用 params => {object: literal} 这种简单的语法返回对象字面量是行不通的。

var func = () => { foo: 1};
func(); // undefined

var func = () => { foo: function() {}};   
// SyntaxError: function statement requires a name

这是因为花括号 {} 里面的代码被解析为一系列语句（即 foo 被认为是一个标签，而非对象字面量的组成部分）。
所以，记得用圆括号把对象字面量包起来：

var func = () => ({foo: 1});

换行

箭头函数在参数和箭头之间不能换行。

var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'

解析顺序

虽然箭头函数中的箭头不是运算符，但箭头函数具有与常规函数不同的特殊运算符优先级解析规则。

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok

更多示例

使用三元运算符

var foo = a => a > 15 ? 15 : a;

foo(10); // 10
foo(16); // 15

闭包

// 标准的闭包函数
function Add() {
  var i = 0;
  return function() {return (++i);
  }
}

var add = Add();
add(); // 1
add(); // 2

// 箭头函数体的闭包(i = 0 是默认参数)
var Add = (i = 0) => {return (() => (++i)) };
var add = Add();
add(); // 1
add(); // 2

// 因为仅有一个返回，return 及括号也可以省略
var Add = (i = 0) => () => (++i);

箭头函数递归

var fact = (x) => (x == 0 ?  1 : x*fact(x-1) );
fact(5);       // 120

总结

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