前言
ES6 提供了一种很简化的写方法的新写法。就是箭头函数。有了箭头函数,可以更加优化代码的长度,也可以使代码读起来更加好看,增加可读性。但箭头函数和方法构造是由点区别,现在总结了用法和注意事项。请大家阅读学习用。
基本用法
带一个参数
//ES6
var f = v => v;
//ES5
var f = function(v){
return v;
}
带多参数
//ES6
var f = (x,y) => x+y;
//ES5
var f = function(x,y){
return x+y;
}
不带参数
//ES6
var f = () => 5;
//ES5
var f = function(){
return 5;
}
带变量参数
//ES6
var obj = {x:1,y:2};
var f = (obj) => x + y;
//ES5
var obj = {x:1,y:2};
var f = function(obj){
return obj.x+obj.y;
}
案例
数组案例
//ES6
[1,2,3].map(x => x);
//ES5
[1,2,3].map(function(x){
return x;
})
settimeout案例
//ES6
setTimeout(x=>{return x;},1000)
//ES5
setTimeout(function(x){
return x;
},1000)
rest参数案例
//ES6
var f = (...arr) => arr;
f(1,2,3,4,5)
//[1,2,3,4,5]
注意事项
- 函数体内的this对象就是定义时所在的对象,而不是使用时所在的对象。
- 不可以当作构造函数。也就是说,不可以使用new命令,否则会抛出一个错误。
- 不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用rest参数代替。
- 不可以使用yield命令,因此箭头函数不用做Generator函数。
重点说下第一点:
var o = {
init : function(){
document.addEventListener("click",event=>this.renter(event.type),false)
},
renter:function(){
console.log("o")
}
}
按以前ES5,this在click事件里面,this应该指向click。但使用箭头函数的话this指向o对象。