DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript函數綁定應用技巧詳解
Javascript函數綁定應用技巧詳解
編輯:關於JavaScript     

函數綁定要創建一個函數,可以在特定環境中以指定參數調用另一個函數。該技巧常常和回調函數與事件處理程序一起使用,以便在將函數作為變量傳遞的同時保留代碼執行環境。請看以下例子:

var handler = {
    message: "Event handled",
    handleClick: function (event) {
        alert(this.message);
    }
};
var btn = document.getElementById("my-btn");
EventUtil.addHandler(btn, "click", handler.handleClick);

在上面這個例子中,創建了一個叫做handler的對象。handler.handleClick()方法被分配為一個DOM按鈕的事件處理程序。當按下該按鈕時,就調用該函數,顯示一個警告框。雖然貌似警告框應該顯示Event handled,然而實際上顯示的是undefiend。這個問題在於沒有保存handler.handleClick()的環境,所以this對象最後是指向了DOM按鈕而非handler。可以如下面的例子所示,使用一個閉包來修正這個問題:

var handler = {
    message: "Event handled",
    handleClick: function (event) {
        alert(this.message);
    }
};
var btn = document.getElementById("my-btn");
EventUtil.addHandler(btn, "click", function (event) {
    handler.handleClick(event);
});

這個解決方案在onclick事件處理程序內使用了一個閉包直接調用handler.handleClick()。當然,這是特定於這段代碼的解決方案。創建多個閉包可能會令代碼變得難於理解和調試。因此,很多JavaScript庫實現了一個可以將函數綁定到指定環境的函數。這個函數一般都叫bind()。

一個簡單的bind()函數接受一個函數和一個環境,並返回一個在給定環境中調用給定函數的函數,並且將所有參數原封不動傳遞過去。語法如下:

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

這個函數似乎簡單,但其功能非常強大的。在bind()中創建了一個閉包,閉包使用apply()調用傳入函數,並給apply()傳遞context對象和參數。注意這裡使用的arguments對象是內部函數的,而非bind()的。當調用返回的函數時,它會在給定環境中執行被傳入的函數並給出所有參數。bind()函數按如下方式使用:

var handler = {
    message: "Event handled",

    handleClick: function (event) {
        alert(this.message);
    }
};
var btn = document.getElementById("my-btn");
EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler));

在這個例子中,我們用bind()函數創建了一個保持了執行環境的函數,並將其傳給EventUtil.addHandler()。Event對象也被傳給了該函數,如下所示:

var handler = {
    message: "Event handled",
    handleClick: function (event) {
        alert(this.message + ":" + event.type);
    }
};
var btn = document.getElementById("my-btn");
EventUtil.addHandler(btn, "click", bind(handler.handleClick, handler));

handler.handleClick()方法和平時一樣獲得了event對象,因為所有的參數都通過被綁定的函數直接傳給了它。

一旦要將某個函數指針以值的形式進行傳遞,同時該函數必須在特定環境中執行,被綁定函數的效用就凸顯出來了。它們主要用於事情處理程序以及setTimeout()和setInterval()。然而,被綁定函數與普通函數相比有更多的開銷——它們需要更多的內存,同時也因為多重函數調用稍微慢一點——所以最好只在必要時使用。

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