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值(在构造函数的情况下是一个新对象，在严格模式的函数调用中则为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对象。

由于箭头函数没有自己的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:

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);
});

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

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

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

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

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

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

箭头函数没有prototype属性。

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

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