TA貢獻(xiàn)1788條經(jīng)驗(yàn) 獲得超4個(gè)贊
這不是上下文件的問(wèn)題，是this的問(wèn)題。像下面這么改下就對(duì)了：element.addEventListener('click',user.greeting.bind(user));
TA貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個(gè)贊
問(wèn)題是怎么出現(xiàn)的JS中的this只與函數(shù)調(diào)用方式有關(guān)，與定義時(shí)的上下文，函數(shù)作用域，都無(wú)關(guān)。有如下情況：user.greeting()//this-->uservarhandler=user.greeting;handler()//this-->window當(dāng)程序執(zhí)行到element.addEventListener('click',user.greeting);user.greeting作為addEventListener的第二個(gè)參數(shù)，假設(shè)這個(gè)參數(shù)就叫handler?？梢韵胂螅赼ddEventListener的內(nèi)部，進(jìn)行了類似varhandler=user.greeting;//這步在傳遞參數(shù)時(shí)完成handler()//this-->window的過(guò)程，this的指向就發(fā)生了改變。如何修復(fù)this的指向只與函數(shù)調(diào)用方式有關(guān)，函數(shù)調(diào)用方式一共四種：func();obj.func();func.apply/call();newfunc();要修復(fù)這個(gè)問(wèn)題，需要用到apply/call這種調(diào)用方式。我們可以想象bind是這樣一個(gè)函數(shù)：functionbind(func,target){returnfunction(){func.apply(target,arguments)；}}Function.prototype['bind']=function(target){returnbind(this,target);}這樣，就可以使用element.addEventListener('click',user.greeting.bind(user));來(lái)解決這個(gè)問(wèn)題了。當(dāng)然，這里的bind是非常簡(jiǎn)化、不可用的，比如可以看到bindreturn的函數(shù)已經(jīng)不是原函數(shù)了，為了保持一致性應(yīng)該綁定原型鏈。這一系列完整的操作在MDN文檔中都可以看到。
舉報(bào)