快捷導(dǎo)航

詳解JavaScript函數(shù)綁定

更新時間：2013年08月18日 17:47:10 作者：

在JavaScript與DOM交互中經(jīng)常需要使用函數(shù)綁定，定義一個函數(shù)然后將其綁定到特定DOM元素或集合的某個事件觸發(fā)程序上，綁定函數(shù)經(jīng)常和回調(diào)函數(shù)及事件處理程序一起使用，以便把函數(shù)作為變量傳遞的同時保留代碼執(zhí)行環(huán)境

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

<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)建了一個handler對象，handler.handlerFun()方法被分配為DOM按鈕的click事件處理程序。設(shè)計意圖是這樣的：當(dāng)點擊按鈕的時候觸發(fā)該方法，彈出對話框顯示handler定義的message，然而點擊后對話框內(nèi)容卻是undefined。熟悉閉包的同學(xué)可以輕松看出來這個問題在于沒有保存handler.handlerFun()方法的執(zhí)行環(huán)境，this對象最后指向了DOM按鈕而非handler?？梢允褂瞄]包解決此問題，修改函數(shù)綁定語句

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

document.getElementById('btnTest').onclick=function(){
                handler.handlerFun();
            }

這樣就可以得到預(yù)期的結(jié)果，這個解決方案在onclick程序內(nèi)部使用一個閉包直接調(diào)用handler.handlerFun()方法，當(dāng)然這是特定于此場景的解決方案，創(chuàng)建多個閉包可能會令代碼難以理解和調(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ù)接收兩個參數(shù)：一個綁定函數(shù)，一個執(zhí)行環(huán)境，并返回一個在執(zhí)行環(huán)境中調(diào)用綁定函數(shù)的函數(shù)?？雌饋砗芎唵危瞧涔δ芎軓?qiáng)大，在bing()中創(chuàng)建了一個閉包，閉包使用apply()調(diào)用傳入的函數(shù)，并給apply()傳入執(zhí)行環(huán)境和參數(shù)，這里的arguments是內(nèi)部匿名函數(shù)的，而非bind()的。當(dāng)調(diào)用返回的函數(shù)時，它會在給定的函數(shù)中執(zhí)行被傳入的函數(shù)，并給出所有參數(shù)。上面例子的調(diào)用handler.handlerFun依舊可以得到參數(shù)event，因為所有參數(shù)在都通過綁定的函數(shù)傳遞給它了。

小結(jié)

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

您可能感興趣的文章: