Detailed explanation of how to use function binding code for javascript interaction

Function binding

In the interaction between javascript and DOM, it is often necessary to use function binding. Define a function and then bind it to a specific DOM element or collection. On an event triggering program, binding functions are often used together with callback functions and event handlers in order to pass functions as variables while retaining the code execution environment

<button id="btn">按钮</button>
<script>      
  var handler={
    message:"Event handled.",
    handlerFun:function(){
      alert(this.message);
    }
  };
btn.onclick = handler.handlerFun;
</script>

The above code creates an object called handler. The handler.handlerFun() method is assigned as an event handler for a DOM button. When the button is pressed, this function is called and an alert box is displayed. Although it seems that the warning box should display Event handled, it actually displays undefiend. The problem is that the environment of handler.handleClick() is not saved, so this object ends up pointing to the DOM button instead of the handler

You can use closures to correct this problem

<button id="btn">按钮</button>
<script>      
var handler={
  message:"Event handled.",
  handlerFun:function(){
    alert(this.message);
  }
};
btn.onclick = function(){
  handler.handlerFun();  
}
</script>

Of course this is a solution specific to this scenario, creating multiple closures may make the code difficult to understand and debug. A better approach is to use function binding

A simple binding function bind() accepts a function and an environment and returns a function that calls the given function in the given environment. function, and pass all parameters intact

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 apply() to call the incoming function and passes the context object and parameters to apply(). When the returned function is called, it will execute the passed function in the given environment and give all parameters

<button id="btn">按钮</button>
<script> 
function bind(fn,context){
  return function(){
    return fn.apply(context,arguments);
  }
}     
var handler={
  message:"Event handled.",
  handlerFun:function(){
    alert(this.message);
  }
};
btn.onclick = bind(handler.handlerFun,handler);
</script>

ECMAScript5 defines a native bind() method for all functions, further simplifying the operation .

As long as a function pointer is passed in the form of a value, and the function must be executed in a specific environment, the effectiveness of the bound function is highlighted. They are mainly used in event handlers and setTimeout() and setInterval(). However, bound functions have more overhead than normal functions, they require more memory, and because multiple function calls are slightly slower, they are best used only when necessary.

The above is the detailed content of Detailed explanation of how to use function binding code for javascript interaction. For more information, please follow other related articles on the PHP Chinese website!