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,然而這種綁定方式和普通函數相比需要更多的內存開銷,所以盡量只在必要的時候使用。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM