Web Front-end
JS Tutorial
Detailed explanation of how to use function binding code for javascript interaction
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Tips for dynamically creating new functions in golang functions
Apr 25, 2024 pm 02:39 PM
Go language provides two dynamic function creation technologies: closure and reflection. closures allow access to variables within the closure scope, and reflection can create new functions using the FuncOf function. These technologies are useful in customizing HTTP routers, implementing highly customizable systems, and building pluggable components.
Considerations for parameter order in C++ function naming
Apr 24, 2024 pm 04:21 PM
In C++ function naming, it is crucial to consider parameter order to improve readability, reduce errors, and facilitate refactoring. Common parameter order conventions include: action-object, object-action, semantic meaning, and standard library compliance. The optimal order depends on the purpose of the function, parameter types, potential confusion, and language conventions.
Complete collection of excel function formulas
May 07, 2024 pm 12:04 PM
1. The SUM function is used to sum the numbers in a column or a group of cells, for example: =SUM(A1:J10). 2. The AVERAGE function is used to calculate the average of the numbers in a column or a group of cells, for example: =AVERAGE(A1:A10). 3. COUNT function, used to count the number of numbers or text in a column or a group of cells, for example: =COUNT(A1:A10) 4. IF function, used to make logical judgments based on specified conditions and return the corresponding result.
How to write efficient and maintainable functions in Java?
Apr 24, 2024 am 11:33 AM
The key to writing efficient and maintainable Java functions is: keep it simple. Use meaningful naming. Handle special situations. Use appropriate visibility.
Comparison of the advantages and disadvantages of C++ function default parameters and variable parameters
Apr 21, 2024 am 10:21 AM
The advantages of default parameters in C++ functions include simplifying calls, enhancing readability, and avoiding errors. The disadvantages are limited flexibility and naming restrictions. Advantages of variadic parameters include unlimited flexibility and dynamic binding. Disadvantages include greater complexity, implicit type conversions, and difficulty in debugging.
What are the benefits of C++ functions returning reference types?
Apr 20, 2024 pm 09:12 PM
The benefits of functions returning reference types in C++ include: Performance improvements: Passing by reference avoids object copying, thus saving memory and time. Direct modification: The caller can directly modify the returned reference object without reassigning it. Code simplicity: Passing by reference simplifies the code and requires no additional assignment operations.
What is the difference between custom PHP functions and predefined functions?
Apr 22, 2024 pm 02:21 PM
The difference between custom PHP functions and predefined functions is: Scope: Custom functions are limited to the scope of their definition, while predefined functions are accessible throughout the script. How to define: Custom functions are defined using the function keyword, while predefined functions are defined by the PHP kernel. Parameter passing: Custom functions receive parameters, while predefined functions may not require parameters. Extensibility: Custom functions can be created as needed, while predefined functions are built-in and cannot be modified.
C++ Function Exception Advanced: Customized Error Handling
May 01, 2024 pm 06:39 PM
Exception handling in C++ can be enhanced through custom exception classes that provide specific error messages, contextual information, and perform custom actions based on the error type. Define an exception class inherited from std::exception to provide specific error information. Use the throw keyword to throw a custom exception. Use dynamic_cast in a try-catch block to convert the caught exception to a custom exception type. In the actual case, the open_file function throws a FileNotFoundException exception. Catching and handling the exception can provide a more specific error message.
