首頁(yè) 猿問(wèn) javascript運(yùn)行上下文問(wèn)題

javascript運(yùn)行上下文問(wèn)題

JavaScript

搖曳的薔薇 2019-04-19 16:29:22

varelement=document.getElementById('element');varuser={firstname:'Wilson',greeting:function(){alert('Mynameis'+this.firstname);}};//Attachuser.greetingasacallbackelement.addEventListener('click',user.greeting);//alert=>'Mynameisundefined'為什么運(yùn)行的時(shí)候，拿不到上下文的值firstname的值

查看完整描述

2 回答

慕斯王

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊

這不是上下文件的問(wèn)題，是this的問(wèn)題。像下面這么改下就對(duì)了：element.addEventListener('click',user.greeting.bind(user));

反對(duì) 回復(fù) 2019-04-19

隔江千里

TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超10個(gè)贊

@邊城狂人已經(jīng)把問(wèn)題解釋清楚了，只是做點(diǎn)補(bǔ)充說(shuō)明。問(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文檔中都可以看到。