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