詳解JavaScript函數(shù)綁定

2019-11-20 22:23:27

字體：大中小

供稿：網(wǎng)友

<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').onclick=handler.handlerFun;
        </script>
    </body>

上面的例子創(chuàng)建了一個(gè)handler對(duì)象，handler.handlerFun()方法被分配為DOM按鈕的click事件處理程序。設(shè)計(jì)意圖是這樣的：當(dāng)點(diǎn)擊按鈕的時(shí)候觸發(fā)該方法，彈出對(duì)話框顯示handler定義的message，然而點(diǎn)擊后對(duì)話框內(nèi)容卻是undefined。熟悉閉包的同學(xué)可以輕松看出來這個(gè)問題在于沒有保存handler.handlerFun()方法的執(zhí)行環(huán)境，this對(duì)象最后指向了DOM按鈕而非handler。可以使用閉包解決此問題，修改函數(shù)綁定語句

復(fù)制代碼代碼如下:

document.getElementById('btnTest').onclick=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ù)

復(fù)制代碼代碼如下:

function bind(fn,context){
                return function(){
                    return fn.apply(context,arguments);
                };
            }

            document.getElementById('btnTest').onclick=bind(handler.handlerFun,handler);

通過自定義的bind函數(shù)可以將函數(shù)綁定到指定環(huán)境，bind()函數(shù)接收兩個(gè)參數(shù)：一個(gè)綁定函數(shù)，一個(gè)執(zhí)行環(huán)境，并返回一個(gè)在執(zhí)行環(huán)境中調(diào)用綁定函數(shù)的函數(shù)。看起來很簡(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ù)在都通過綁定的函數(shù)傳遞給它了。

小結(jié)

一旦要將某個(gè)函數(shù)以函數(shù)指針的形式傳遞，同時(shí)該函數(shù)必須在特定的環(huán)境中執(zhí)行，自定義的bind()函數(shù)就可以使用，他們主要用于事件處理程序及setTimeout和setInterval,然而這種綁定方式和普通函數(shù)相比需要更多的內(nèi)存開銷，所以盡量只在必要的時(shí)候使用。

上一篇：時(shí)間戳轉(zhuǎn)換為時(shí)間年月日時(shí)間的JS函數(shù)

下一篇：jQuery 綁定事件到動(dòng)態(tài)創(chuàng)建的元素上的方法實(shí)例