JavaScript function Binding Application techniques detailed

Article Introduction: function bindings to create a function, you can call another function with the specified parameters in a particular environment.

function bindings to create a function, you can call another function with the specified parameters in a particular environment. This technique is often used with callback functions with event handlers to preserve the code execution environment while the function is passed as a variable. Take a look at the following examples:

var handler = {message
    : "Event handled",
    handleclick:function (event) {
        alert (this.message);
    }
;
var btn = document.getElementById ("my-btn");
Eventutil.addhandler (BTN, "click", Handler.handleclick);

In the example above, an object called handler is created. The Handler.handleclick () method is assigned as an event handler for a Dom button. When the button is pressed, the function is called and a warning box is displayed. Although seemingly warning boxes should show event handled, the actual display is undefiend. The problem is that the Handler.handleclick () environment is not saved, so the this object finally points to the DOM button rather than the handler. You can use a closure to fix this problem as shown in the following example:

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);
});

This solution uses a closure to invoke Handler.handleclick () directly in the OnClick event handler. Of course, this is a solution that is specific to this piece of code. Creating multiple closures can make your code difficult to understand and debug. As a result, many JavaScript libraries implement a function that can bind a function to a specified environment. This function is generally called bind ().

A simple bind () function takes a function and an environment and returns a function that invokes the given function in a given environment and passes all parameters intact. The syntax is as follows:

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

This function seems simple, but its function is very powerful. A closure is created in bind (), the closure uses the Apply () call to pass in the function and the context object and parameters are passed to apply (). Note that the arguments object used here is the intrinsic function, not bind (). When the returned function is invoked, it executes the passed in function in a given environment and gives all parameters. The bind () function is used as follows:

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

In this example, we use the bind () function to create a function that holds the execution environment and passes it to Eventutil.addhandler (). The event object was also passed to the function, as follows:

var handler = {message
    : "Event handled",
    handleclick:function (event) {
        alert (this.message + ":" + Event.typ e);
    }
;
var btn = document.getElementById ("my-btn");
Eventutil.addhandler (BTN, "click", Bind (Handler.handleclick, handler));

The Handler.handleclick () method obtains the event object as usual, because all parameters are passed directly to it through the bound function.

Once a function pointer is passed as a value, and the function must be executed in a particular environment, the usefulness of the bound function is highlighted. They are used primarily for event handlers as well as settimeout () and SetInterval (). However, bound functions have more overhead than normal functions-they require more memory, and because multiple function calls are slightly slower one o'clock-so it is best to use them only when necessary.