箭头函数
基本语法
代码语言:javascript复制(x,y)=>{
...函数体
}
代码语言:javascript复制//es6
let res = (x,y)=>{
console.log(x,y)
}
res(2,3);
//es5
let res2 = function(x,y){
console.log(x,y)
}
res2(2,3)
上面两种输出的结果是相等的,箭头函数相对于es6之前的function更加简洁,除了简洁这一点,箭头函数还有一个很重要的特性,箭头函数内部的this是由上下文决定的,什么意思? 看下示例
代码语言:javascript复制let person = {
name:'tz',
sex:'m',
age:14,
show:function(){
console.log(this.sex);
}
}
person.show();//m
正常调用对象方法返回m 此时给show方法加上一个定时器的话
代码语言:javascript复制show:function(){
setTimeout(function(){
console.log(this.sex);
}, 2000)
}
person.show();//undefind
结果返回undefind,设置因为普通函数会改变this指向的问题,我们在打印this看是否是这样
代码语言:javascript复制show:function(){
console.log(this)
setTimeout(function(){
console.log(this)
console.log(this.sex);
}, 2000)
}
person.show();//undefind
可以看到this由person变成了window所以最后结果是undefind
没有接触Es6之前我们或许会这样解决this指向的问题
代码语言:javascript复制show:function(){
console.log(this)
var that = this
setTimeout(function(){
console.log(that)
console.log(that.sex);
}, 2000)
}
我们通过this保留了上一步的this结果正常输出
而在es6你只需要将function变成“=>”即可
代码语言:javascript复制show:function(){
console.log(this)
// var that = this
setTimeout(()=>{
console.log(this)
console.log(this.sex);
}, 2000)
}
箭头函数语法
基本
代码语言:javascript复制(args)=>{
//函数体
}
括号代表要传递的参数 =>后面代表函数的执行体 如果参数只有一个是可以省略括号的
代码语言:javascript复制args=>{
}
没有参数时必须加括号
代码语言:javascript复制()=>{
//函数体
}
当函数体只有一行语句并且为return时可以省略{}
如
代码语言:javascript复制//省略写法
let res = (x,y)=>x y;
//正常写法
let res2 = (x,y)=>{
return x y;
}
console.log(res(2,3));//5
console.log(res2(2,3));//5
总结
箭头函数没有自己的this,箭头函数的this不是在调用时决定的,而是在定义的时候处在的对象就是他的this 箭头函数看外出是否有函数,如果有外出函数的this就是箭头函数的this 如果没有this指向window