DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 詳解JavaScript函數綁定
詳解JavaScript函數綁定
編輯:JavaScript基礎知識     

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved