JavaScript函式繫結

謙行發表於2013-08-11
JavaScript函式

一個簡單的函式繫結

在JavaScript與DOM互動中經常需要使用函式繫結，定義一個函式然後將其繫結到特定DOM元素或集合的某個事件觸發程式上，繫結函式經常和回撥函式及事件處理程式一起使用，以便把函式作為變數傳遞的同時保留程式碼執行環境。

<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>

 

上面的例子建立了一個handler物件，handler.handlerFun()方法被分配為DOM按鈕的click事件處理程式。設計意圖是這樣的：當點選按鈕的時候觸發該方法，彈出對話方塊顯示handler定義的message，然而點選後對話方塊內容卻是undefined。熟悉閉包的同學可以輕鬆看出來這個問題在於沒有儲存handler.handlerFun()方法的執行環境，this物件最後指向了DOM按鈕而非handler。可以使用閉包解決此問題，修改函式繫結語句

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

這樣就可以得到預期的結果，這個解決方案在onclick程式內部使用一個閉包直接呼叫handler.handlerFun()方法，當然這是特定於此場景的解決方案，建立多個閉包可能會令程式碼難以理解和除錯。

 

自定義bind函式

function bind(fn,context){
                return function(){
                    return fn.apply(context,arguments);
                };
            }
            
            document.getElementById('btnTest').onclick=bind(handler.handlerFun,handler);

通過自定義的bind函式可以將函式繫結到指定環境，bind()函式接收兩個引數：一個繫結函式，一個執行環境，並返回一個在執行環境中呼叫繫結函式的函式。看起來很簡單，但是其功能很強大，在bing()中建立了一個閉包，閉包使用apply()呼叫傳入的函式，並給apply()傳入執行環境和引數，這裡的arguments是內部匿名函式的，而非bind()的。當呼叫返回的函式時，它會在給定的函式中執行被傳入的函式，並給出所有引數。上面例子的呼叫handler.handlerFun依舊可以得到引數event，因為所有引數在都通過繫結的函式傳遞給它了。

小結

一旦要將某個函式以函式指標的形式傳遞，同時該函式必須在特定的環境中執行，自定義的bind()函式就可以使用，他們主要用於事件處理程式及setTimeout和setInterval,然而這種繫結方式和普通函式相比需要更多的記憶體開銷，所以儘量只在必要的時候使用。

相關文章