Home > Developer > JavaScript
A simple function binding
In JavaScript interaction with DOM, you often need to use function binding to define a function and bind it to a specific DOM element or set of event triggers, binding functions are often used with callback functions and Event Handlers to keep the code execution environment while passing functions as variables.
<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>
In the preceding example, a handler object is created, and the handler. handlerFun () method is assigned as the click event handler of the DOM button. The design intent is as follows: This method is triggered when a button is clicked. The handler defined message is displayed in the pop-up dialog box, but the content of the dialog box is undefined. People familiar with closures can easily see that this problem is that they did not save the execution environment of the handler. handlerFun () method. this object finally points to the DOM button rather than handler. You can use the closure to solve this problem and modify the function binding statement.
Document. getElementById ('btntest'). onclick = function (){
Handler. handlerFun ();
} In this way, we can get the expected results. This solution uses a closure inside the onclick program to directly call handler. handlerFun () method, of course, is a solution specific to this scenario. creating multiple closures may make the code hard to understand and debug.
Custom bind Functions
Function bind (fn, context ){
Return function (){
Return fn. apply (context, arguments );
};
}
Document. getElementById ('btntest '). onclick = bind (handler. handlerFun, handler); the custom bind function can bind the function to the specified environment. The bind () function receives two parameters: one binding function and the other executing environment, return a function that calls the bound function in the execution environment. It looks very simple, but it is very powerful. A closure is created in bing (). The closure uses apply () to call the passed function, and applies () to the execution environment and parameters, here, arguments is an internal anonymous function, not a bind. When the returned function is called, it executes the passed-in function in the given function and gives all the parameters. The preceding example calls handler. handlerFun to still get the parameter event, because all parameters are passed to it through the bound function.
Summary
Once you want to pass a function as a function pointer and the function must be executed in a specific environment, the custom bind () function can be used, they are mainly used for event handlers, setTimeout, and setInterval. However, this binding method requires more memory overhead than normal functions, so we try to use it only when necessary.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
