箭头函数

基本用法

ES6 允许使用“箭头”（=>）定义函数。

var f = v => v;

var f = function (v) {
    return v;
};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

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

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
    return num1 + num2;
};

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

 

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
let getTempItem = id => { id: id, name: 'Temp' };

// 不报错
let getTempItem = id => ({ id: id, name: 'Temp' });

下面是一种特殊情况，虽然可以运行，但会得到错误的结果。

let foo = () => { a: 1 }
foo() // undefined

上面代码中，原始意图是返回一个对象 { a: 1 }，但是由于引擎认为大括号是代码块，所以执行了一行语句 a: 1。这时，a 可以被解释为语句的标签，因此实际执行的语句是 1; ，然后函数就结束了，没有返回值。

 

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

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

箭头函数可以与变量结构结合使用。

const full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}

箭头函数使得表达更加简洁。

const isEven = n => n % 2 === 0;
const square = n => n * n;

箭头函数的一个用处是简化回调函数。

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

// 箭头函数写法
[1, 2, 3].map(x => x * x);

另一个例子是

// 普通函数写法
var result = values.sort(function (a, b) {
    return a - b;
});

// 箭头函数写法
var result = values.sort((a, b) => a - b);

下面是 rest 参数与箭头函数结合的例子。

const numbers = (...nums) => nums;

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

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

使用注意点

箭头函数有几个使用注意点。

（1）箭头函数没有自己的 this 对象。

（2）不可以当作构造函数，也就是说，不可以对箭头函数使用 new 命令，否则会抛出一个错误。

（3）不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

上面四点中，最重要的是第一点。对于普通函数来说，内部的 this 指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的 this 对象，内部的 this 就是定义时上层作用域中的 this 。也就是说，箭头函数内部的 this 指向是固定的，相比之下，普通函数的 this 指向是可变的。

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代码中，setTimeout() 的参数是一个箭头函数，这个箭头函数的定义生效是在 foo 函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时 this 应该指向全局对象 window ，这时应该输出 21 。但是，箭头函数导致 this 总是指向函数定义生效时所在的对象（本例是 { id: 42 } ），所以打印出来的是 42。