ES6允许使用“箭头”(=>
)定义函数。
var f = v => v;
上面的箭头函数等同于:
var f = function(v) {
return v;
};
使用注意点
箭头函数有几个使用注意点。
(1)函数体内的
this
对象,就是定义时所在的对象,而不是使用时所在的对象。(2)不可以当作构造函数,也就是说,不可以使用
new
命令,否则会抛出一个错误。(3)不可以使用
arguments
对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。(4)不可以使用
yield
命令,因此箭头函数不能用作Generator函数。
上面四点中,第一点尤其值得注意。this
对象的指向是可变的,但是在箭头函数中,它是固定的。
var id = 21;
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
foo.call({ 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
一次都没更新。