javascript 箭头函数

一、前言

箭头函数是e6加入的新特性,为了方便回顾，下面将它的相关知识简单整理一下。

二、基本使用

1. 一个简单的例子如下：

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

2. 当箭头函数不需要参数或需要多个参数时，使用一个圆括号代表参数部分。

let f1 = () => 2 
f1() // 函数返回2
let f2 = (a,b) => a+b 
f2(2,3) // 函数返回5

3. 如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

let sum = (a,b) => {
	return a+b;
}

4. 在箭头后面，大括号被解释为代码块，如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会出错。
   如
   let f = () => {a:1,b:2} //error
   let f = () => ({a:1,b:2}) //correct

5. 如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。

let f = () => void doesNotReturn();

6. 箭头函数可与变量解构结合使用。

const f= ({ a, b}) => a+ b;  // 注意前面用的const
等同于
function f(obj) {
  return obj.a+ obj.b;
}

7. 用于简化回调函数

// 普通函数写法
[1,2,3,4,5].map(function (x) {
  return x * x;
});
// 箭头函数写法
[1,2,3,4,5].map(x => x * x);

8. 与rest结合使用

const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]
const headAndTail = (head, ...tail) => [head, tail];

headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]

三、注意事项

1. 箭头函数没有自己的this对象
   对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域中的this。也就是说，箭头函数内部的this指向是固定的，相比之下，普通函数的this指向是可变的。同时，箭头函数绑定this,很大程度上解决了this指向的问题。
   箭头函数实际上可以让this指向固定化，绑定this使得它不再可变，这种特性很有利于封装回调函数。
   除了this，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments、super、new.target。由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向，即使内部出现this，那么该this指向的也是外部的this。
2. 不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
3. 不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。
   箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。
4. 不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

四、不适用箭头函数的场合

1. 定义对象的方法时不适用

const cat = {
  lives: 9,
  jumps: () => { // error 应该使用普通函数
    this.lives--;
  }
}

2. 需要动态this的时候，也不应使用箭头函数
3. 如果函数体很复杂，有许多行，或者函数内部有大量的读写操作，不单纯是为了计算值，使用普通函数代码可读性更好。

点此进入参考文献