第十节（补课）：函数的扩展 — 箭头函数的this使用

        有2位童鞋在第十节留言说，关于箭头函数的this的使用有必要介绍一下。

        在这里，前端君对2位同学表示感谢，相信很多初学者也一样会感谢你们的提醒。

        那么，接下来我们就学习一下，究竟这个箭头函数的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位童鞋的提醒，也希望更多童鞋像他们一样参与互动，一起学习一起进步，不管你处于哪个学习阶段，这里都欢迎。

 

补课小结

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