javascript
JavaScript函数绑定
一個(gè)簡(jiǎn)單的函數(shù)綁定
在JavaScript與DOM交互中經(jīng)常需要使用函數(shù)綁定，定義一個(gè)函數(shù)然后將其綁定到特定DOM元素或集合的某個(gè)事件觸發(fā)程序上，綁定函數(shù)經(jīng)常和回調(diào)函數(shù)及事件處理程序一起使用，以便把函數(shù)作為變量傳遞的同時(shí)保留代碼執(zhí)行環(huán)境。
<body><input id="btnTest" type="button" value="Button"/><script type="text/javascript"> var handler={message:"Event handled.",handlerFun:function(){alert(this.message);}};document.getElementById('btnTest').οnclick=handler.handlerFun;</script></body>?
上面的例子創(chuàng)建了一個(gè)handler對(duì)象，handler.handlerFun()方法被分配為DOM按鈕的click事件處理程序。設(shè)計(jì)意圖是這樣的：當(dāng)點(diǎn)擊按鈕的時(shí)候觸發(fā)該方法，彈出對(duì)話(huà)框顯示handler定義的message，然而點(diǎn)擊后對(duì)話(huà)框內(nèi)容卻是undefined。熟悉閉包的同學(xué)可以輕松看出來(lái)這個(gè)問(wèn)題在于沒(méi)有保存handler.handlerFun()方法的執(zhí)行環(huán)境，this對(duì)象最后指向了DOM按鈕而非handler。可以使用閉包解決此問(wèn)題，修改函數(shù)綁定語(yǔ)句
document.getElementById('btnTest').οnclick=function(){handler.handlerFun();}這樣就可以得到預(yù)期的結(jié)果，這個(gè)解決方案在onclick程序內(nèi)部使用一個(gè)閉包直接調(diào)用handler.handlerFun()方法，當(dāng)然這是特定于此場(chǎng)景的解決方案，創(chuàng)建多個(gè)閉包可能會(huì)令代碼難以理解和調(diào)試。
?
自定義bind函數(shù)
function bind(fn,context){return function(){return fn.apply(context,arguments);};}document.getElementById('btnTest').οnclick=bind(handler.handlerFun,handler);通過(guò)自定義的bind函數(shù)可以將函數(shù)綁定到指定環(huán)境，bind()函數(shù)接收兩個(gè)參數(shù)：一個(gè)綁定函數(shù)，一個(gè)執(zhí)行環(huán)境，并返回一個(gè)在執(zhí)行環(huán)境中調(diào)用綁定函數(shù)的函數(shù)。看起來(lái)很簡(jiǎn)單，但是其功能很強(qiáng)大，在bing()中創(chuàng)建了一個(gè)閉包，閉包使用apply()調(diào)用傳入的函數(shù)，并給apply()傳入執(zhí)行環(huán)境和參數(shù)，這里的arguments是內(nèi)部匿名函數(shù)的，而非bind()的。當(dāng)調(diào)用返回的函數(shù)時(shí)，它會(huì)在給定的函數(shù)中執(zhí)行被傳入的函數(shù)，并給出所有參數(shù)。上面例子的調(diào)用handler.handlerFun依舊可以得到參數(shù)event，因?yàn)樗袇?shù)在都通過(guò)綁定的函數(shù)傳遞給它了。
小結(jié)
一旦要將某個(gè)函數(shù)以函數(shù)指針的形式傳遞，同時(shí)該函數(shù)必須在特定的環(huán)境中執(zhí)行，自定義的bind()函數(shù)就可以使用，他們主要用于事件處理程序及setTimeout和setInterval,然而這種綁定方式和普通函數(shù)相比需要更多的內(nèi)存開(kāi)銷(xiāo)，所以盡量只在必要的時(shí)候使用。
總結(jié)
以上是生活随笔為你收集整理的JavaScript函数绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 梦到捡硬币是什么意思周公解梦
- 下一篇： Spring自动扫描配置及使用方法