美文网首页让前端飞Web前端之路
ES6对函数的拓展 — 箭头函数的this使用(2018-05-

ES6对函数的拓展 — 箭头函数的this使用(2018-05-

作者: CRUD_科科 | 来源:发表于2018-05-11 09:36 被阅读2次
      箭头函数中的this指向的是定义时的this,而不是执行时的this。

    举个栗子

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

      上面对象中的方法(ES6对象的扩展),x的值确实是100,问题出在了this上,当代码执行到了setTimeout( )的时候,此时的this已经变成了window对象(setTimeout( )是window对象的方法),已经不再是obj对象了,ES5中可以用var that = this的方式避免。

    箭头函数闪亮登场

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

      唯一的不用就是setTimeout中,原本的匿名函数用箭头函数代替了箭头函数中的this指向的是定义时的this,而不是执行时的this当定义obj的show( )方法的时候,我们在箭头函数编写this.x,此时的this是指的obj,所以this.x指的是obj.x。而在show()被调用的时候,this依然指向的是被定义时候所指向的对象,也就是obj对象,故打印出:100。

    相关文章

      网友评论

        本文标题:ES6对函数的拓展 — 箭头函数的this使用(2018-05-

        本文链接:https://www.haomeiwen.com/subject/vpgxdftx.html