箭头函数的this指向问题-一看就懂

OK,对于箭头函数的this
用一句话概括：箭头函数中的this指向的是定义时的this，而不是执行时的this。

如果上面这句话听的是懂非懂或者完全不懂的，没关系，下面会有案例讲解。

举个栗子

来看看this的一个使用案例：

    //定义一个对象
    var obj = {
        x:100, //属性x
        show(){
        //延迟500毫秒，输出x的值
            setTimeout(
               //匿名函数
               function(){console.log(this.x);},
               500
           );
        }
    };
    obj.show();//打印结果：undefined

案例中，我们的obj对象中有一个属性x和一个属性show( )方法（用的是对象的简洁表示法，第九节已讲解，点击查看），show( )通过this打印出x的值。可最后一句代码执行后，我们打印出的结果是undefined。这是为什么呢？难道x的值不是100吗？

没错，x的值确实是100，但问题出在了this上，当代码执行到了setTimeout( )的时候，此时的this已经变成了window对象（setTimeout( )是window对象的方法），已经不再是obj对象了，所以我们用this.x获取的时候，获取的不是obj.x的值，而是window.x的值，再加上window上没有定义属性x，所以得到的结果就是：undefined。

我们可以用一些ES5中的知识来巧妙地避过这个坑，但是，我们今天主要介绍的是ES6的箭头函数。

箭头函数闪亮登场

如果使用箭头函数来编写同样的一段代码，得到的this.x又是另一番景象。我们来试试看：

  //定义一个对象
    var obj = {
        x:100,//属性x
        show(){
            //延迟500毫秒，输出x的值
            setTimeout(
               //不同处：箭头函数
               () => { console.log(this.x)},
               500
            );
        }
    };
    obj.show();//打印结果：100

同样的一段代码，唯一的不用就是setTimeout中，原本的匿名函数用箭头函数代替了，你可以往上翻，对比着看两段代码的不同之处。此外，最大的不同的是打印结果，用箭头函数编写的这段代码，成功地打印出了我们想要的结果：100。

为什么是这样？正如文章第三段所概括：

箭头函数中的this指向的是定义时的this，而不是执行时的this

当定义obj的show( )方法的时候，我们在箭头函数编写this.x，此时的this是指的obj，所以this.x指的是obj.x。而在show()被调用的时候，this依然指向的是被定义时候所指向的对象，也就是obj对象，故打印出：100。

以上就是箭头函数中this的指向问题讲解！如果看完有点绕的话，可以重看一遍，看慢一点，学得更快！

再次感谢  “断线人偶”，“Better”  2位童鞋的提醒，也希望更多童鞋像他们一样参与互动，一起学习一起进步，不管你处于哪个学习阶段，这里都欢迎。

补课小结

ps ：箭头函数的this指向的是定义时的this对象，而不是执行时的this对象。

更多前端学习内容文章干货请关注我的专栏(不断更新)

阿里名厂标准web前端高级工程师教程目录大全,从基础到进阶,看完保证您的薪资上升一个台阶

在这里我给大家准备了很多的学习资料

其实你与阿里工程师的差距只差这些东西