Copy Code code as follows:
<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>
The above example creates a handler object, and the Handler.handlerfun () method is assigned to the Click event handler of the DOM button. The design intent is this: when the button is clicked to trigger the method, the pop-up dialog box shows the handler definition of the message, but the click of the dialog box content is undefined. Students who are familiar with closures can easily see that the problem is that there is no execution environment to save the Handler.handlerfun () method, the This object finally points to the DOM button rather than the handler. You can use closures to resolve this problem and modify function binding statements
Copy Code code as follows:
document.getElementById (' btntest '). Onclick=function () {
Handler.handlerfun ();
}
This gives you the expected result, which uses a closure within the OnClick program to invoke the Handler.handlerfun () method directly, which is a solution specific to this scenario, and creating multiple closures may make your code difficult to understand and debug.
Custom bind function
Copy Code code as follows:
function bind (Fn,context) {
return function () {
Return fn.apply (context,arguments);
};
}
document.getElementById (' btntest '). Onclick=bind (Handler.handlerfun,handler);
By customizing the BIND function to bind functions to the specified environment, the BIND () function receives two parameters: a binding function, an execution environment, and returns a function that invokes the binding function in the execution environment. It looks simple, but it's powerful, and a closure is created in Bing (), the closure uses the Apply () to invoke the incoming function, and the Apply () is passed into the execution environment and parameters, where the arguments is an internal anonymous function, not bind (). When the returned function is invoked, it executes the passed in function in the given function and gives all parameters. The call Handler.handlerfun of the example above can still get the argument event, because all parameters are passed to it through the binding function.
Summary
Once you want to pass a function as a function pointer, and the function must be executed in a particular environment, the custom bind () function is available, and they are used primarily for event handlers and SetTimeout and SetInterval. However, this binding method requires more memory overhead than normal functions, so try to use it only when necessary.
