语法:
([param] [, param]) => {
statements
}
param => expression
使用:
( )=>{···}; //零个参数用()表示
x =>{···}; //一个参数,可以省略()
(x,y)=>{···}; //多个参数不能省略()
**多行语句需要用{}括起来,单行表达式不需要{},并且会作为函数返回值。**
特性:
箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this,而非执行时。
例如:
var o = {
x : 1,
fn : function() { console.log(this.x) },
test : function() {
setTimeout(function() {
this.fn();
}, 100);
}
};
o.test(); // TypeError : this.fn is not a function
上面的代码会出现错误,因为this的指向从o变为了全局(函数调用中的this都是指向全局的)。
要修改上面的代码如下:
var o = {
x : 1,
fn : function() { console.log(this.x) },
test : function() {
var _this = this;
setTimeout(function() {
_this.fn();
}, 100);
}
};
o.test();
通过使用外部事先保存的this就行了。
利用到箭头函数修改,箭头函数的 this 始终指向函数定义时的 this,而非执行时。
var o = {
x : 1,
fn : function() { console.log(this.x) },
test : function() {
setTimeout(() => { this.fn() }, 100);
}
};
o.test();
这回this就指向o了。箭头函数可以让setTimeout里面的this,绑定定义时所在的作用域,而不是指向运行时所在的作用域。
上面代码中,转换后的ES5版本清楚地说明了,箭头函数里面根本没有自己的this,而是引用外层的this。
需要注意一点的就是箭头函数中的this是不会改变指向对象的,我们知道call和apply可以改变this的指向,但是在箭头函数中是无效的。
var x = 1,
o = {
x : 10,
test : () => {
console.log(this);//window函数调用中的this都是指向全局的
return this.x
}
};
console.log(o.test()); // 1
console.log(o.test.call(o)); // 依然是1
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
var sum = (num1, num2) => { return num1 + num2; }
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号。
var getTempItem = id => ({ id: id, name: "Temp" });
使用注意点
- 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
- 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
- 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
- 不可以使用yield命令,因此箭头函数不能用作Generator函数。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。