亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

ES6對函數的拓展 — 箭頭函數的this使用(2018-05-11)

標簽:
JavaScript
  箭头函数中的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。



作者:a小磊_
链接:https://www.jianshu.com/p/be8f5ce4799b


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消