箭头函数

186 阅读1分钟
let obj={
    fn:function(){
        setTimeout(function(){
            console.log(this.a)//undefinde
        })
    },
    a:1
}
obj.fn()

因为setTimeout会将一个匿名的回调函数推入异步队列,而回调函数是具有全局性的,即在非严格模式下this会指向window,就会存在丢失变量a的问题。

下面是正确的写法

let obj={
    fn:function(){
        let that=this
        setTimeout(function(){
            console.log(that.a)//1
        })
    },
    a:1
}
obj.fn()

箭头函数的写法

let obj={
    fn:function(){
        setTimeout(()=>{
            console.log(this.a)//1
        })
    },
    a:1
}
obj.fn()

这里是fn的函数执行上下文,相当于将箭头函数中的this绑定了fn函数执行上下文中的this.需要注意的是箭头函数的this指向即使使用call,apply,bind也无法改变。

let obj={
    fn:()=>{
        setTimeout(()=>{
            console.log(this.a)//undefinde
        })
    },
    a:1
}
obj.fn()

值得注意的是fn后面的function不能使用箭头函数,因为这样它就会再使用上层的this,而再上层是全局的执行上下文,它的this的值会指向window,所以找不到变量a返回undefined.

箭头函数是没有arguments对象。