Web Front-end
JS Tutorial
Detailed explanation of immediate execution function examples in JavaScript
Detailed explanation of immediate execution function examples in JavaScript
Javascript is relatively casual compared to other programming languages, so the JavaScript code is full of all kinds of weird writing methods, which are sometimes confusing. Of course, being able to understand various writing methods is also a further in-depth understanding of the characteristics of the JavaScript language. This article mainly introduces you to the relevant information about the immediate execution function in JavaScript. I hope it can help you.
Preface
js execute function immediately allows your function to be executed immediately after creation. js execute function immediately mode is a syntax, This mode allows your functions to be executed immediately after they are defined. This mode is essentially a function expression (named or anonymous) that is executed immediately after it is created.
( function(){…} )() and ( function (){…} () ) are two common ways of writing JavaScript functions to execute immediately. At first, I thought it was an anonymous function wrapped in parentheses, and then Adding parentheses later to call the function finally achieves the purpose of executing the function immediately after it is defined. Later, it was discovered that the reason for adding parentheses was not the same.
Not much to say below, let’s take a look at the detailed introduction.
Usually we declare a function in the following ways:
// 声明函数f1
function f1() {
console.log("f1");
}
// 通过()来调用此函数
f1();
//一个匿名函数的函数表达式，被赋值给变量f2:
var f2 = function() {
console.log("f2");
}
//通过()来调用此函数
f2();
//一个命名为f3的函数的函数表达式(这里的函数名可以随意命名，可以不必和变量f3重名)，被赋值给变量f3:
var f3 = function f3() {
console.log("f3");
}
//通过()来调用此函数
f3();If you If you have seen some custom controls, you will find that most of them follow this writing method:
(function() {
"
// 这里开始写功能需求
})();This is what we often call the immediate execution function (IIFE ), as the name suggests, that is to say, this function executes the function body immediately and does not require you to actively call it. Under normal circumstances, we only use IIFE for anonymous functions. This has two purposes:
First, there is no need to name the function, which avoids contaminating global variables
. Second, IIFE forms a separate scope internally, which can encapsulate some private variables that cannot be read externally.
If you can’t understand these two sentences, let’s start with the operating principle of IIFE.
Because IIFE is usually used for anonymous functions, here we use a simple anonymous function as a chestnut:
var f = function(){
console.log("f");
}
f();We found that f here It is just a reference variable of this anonymous function, so since f() can call this function, can I replace f with the function itself:
function(){
console.log("f");
}();After running The following result is obtained:
Uncaught SyntaxError: Unexpected token (
The reason for this error is that after the Javascript engine sees the function keyword, it thinks that what follows is a function declaration statement, which should not be End with parentheses. The solution is to let the engine know that the part before the parentheses is not a function definition statement, but an expression, which can be operated on. Here is a distinction between function declaration and function expression:
1. Function declaration ( That is, we usually use function x(){} to declare a function)
function myFunction () { /* logic here */ }2. Function expression (similar to this form)
var myFunction = function () { /* logic here */ };
var myObj = {
myFunction: function () { /* logic here */ }
};We learned in elementary school that expressions enclosed in () will be executed first, like the following:
1+(2+3) //这里先运行小括号里面的内容没有意见撒
In fact, parentheses have a similar effect in JavaScript. When the Javascript engine sees the function keyword, it will think it is a function declaration statement. So what will happen if the Javascript engine sees the parentheses first:
//用小括号把函数包裹起来
(function(){
console.log("f");
})();The function was successfully executed:
f //控制台输出
In this case the Javascript engine will Think this is an expression, not a function declaration. Of course, there are many ways to make the Javascript engine think this is an expression:
!function(){}();
+function(){}();
-function(){}();
~function(){}();
new function(){ /* code */ }
new function(){ /* code */ }() // 只有传递参数时，才需要最后那个圆括号。
……Back The previous question, why is it said that the form of IIFE avoids polluting global variables? If you have seen jquery plug-ins written by others, there will usually be code similar to this:
(function($){
"
//插件实现代码
})(jQuery);The jquery here is actually the parameter of the anonymous function. Think about it when we call the anonymous function, we use f(), so the anonymous parameter is f(args), right? Here, jquery is passed into the function as a parameter. Then when using the formal parameter $ inside the function, it will not affect the external environment, because some plug-ins also use the $ qualifier, and you can do whatever you want inside the function.
Related recommendations:
Immediate execution function in JS
Three different ways to write JavaScript immediate execution function_javascript Tips
Introduction to immediate execution function expressions in JavaScript_javascript tips
The above is the detailed content of Detailed explanation of immediate execution function examples in JavaScript. 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
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
Dec 17, 2023 pm 06:55 PM
Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
Dec 18, 2023 pm 03:39 PM
With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
The relationship between js and vue
Mar 11, 2024 pm 05:21 PM
The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue.
Learn best practice examples of pointer conversion in Golang
Feb 24, 2024 pm 03:51 PM
Golang is a powerful and efficient programming language that can be used to develop various applications and services. In Golang, pointers are a very important concept, which can help us operate data more flexibly and efficiently. Pointer conversion refers to the process of pointer operations between different types. This article will use specific examples to learn the best practices of pointer conversion in Golang. 1. Basic concepts In Golang, each variable has an address, and the address is the location of the variable in memory.
How to get HTTP status code in JavaScript the easy way
Jan 05, 2024 pm 01:37 PM
Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service
