ES6箭头函数

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 语句返
回。

var sum = (num1, num2) => { return num1 + num2;}

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

// 报错
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）函数体内的 this 对象，就是定义时所在的对象，⽽不是使⽤时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使⽤ new 命令，否则会抛出⼀个错误。
（3）不可以使⽤ arguments 对象，该对象在函数体内不存在。如果要⽤，可以⽤ rest 参数代替。
（4）不可以使⽤ yield 命令，因此箭头函数不能⽤作 Generator 函数。
上⾯四点中，第⼀点尤其值得注意。 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 。
箭头函数可以让 setTimeout ⾥⾯的 this ，绑定定义时所在的作⽤域，⽽不是指向运⾏时所在的作⽤
域。下⾯是另⼀个例⼦。

function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭头函数
setInterval(() => this.s1++, 1000);
// 普通函数
setInterval(function () {
this.s2++;
}, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

上⾯代码中， Timer 函数内部设置了两个定时器，分别使⽤了箭头函数和普通函数。前者的 this 绑
定定义时所在的作⽤域（即 Timer 函数），后者的 this 指向运⾏时所在的作⽤域（即全局对象）。
所以，3100 毫秒之后， timer.s1 被更新了 3 次，⽽ timer.s2 ⼀次都没更新。
箭头函数可以让 this 指向固定化，这种特性很有利于封装回调函数。下⾯是⼀个例⼦，DOM 事件的
回调函数封装在⼀个对象⾥⾯。

 

var handler = {
id: '123456',
init: function() {
document.addEventListener('click',
event => this.doSomething(event.type), false);
},
doSomething: function(type) {
console.log('Handling ' + type + ' for ' + this.id);
}
};

上⾯代码的 init ⽅法中，使⽤了箭头函数，这导致这个箭头函数⾥⾯的 this ，总是指
向 handler 对象。否则，回调函数运⾏时， this.doSomething 这⼀⾏会报错，因为此时 this 指
向 document 对象。
this 指向的固定化，并不是因为箭头函数内部有绑定 this 的机制，实际原因是箭头函数根本没有⾃
⼰的 this ，导致内部的 this 就是外层代码块的 this 。正是因为它没有 this ，所以也就不能⽤作
构造函数。
所以，箭头函数转成 ES5 的代码如下。

// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}

上⾯代码中，转换后的 ES5 版本清楚地说明了，箭头函数⾥⾯根本没有⾃⼰的 this ，⽽是引⽤外层
的 this 。

可以下载ES6的完整语法介绍：

https://download.csdn.net/download/haonanqide/10577446