Detailed examples of immediate execution of functions in JavaScript
js Immediate execution function allows your function to be executed immediately after creation. The js immediate execution function mode is a syntax that allows your function to be executed immediately after definition. This mode is essentially a function expression ( named or anonymous), executed immediately after creation. Compared with other programming languages, JavaScript is relatively casual, so the JavaScript code is full of all kinds of weird writing methods, which sometimes appear in the fog. 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 of functions in JavaScript. Friends in need can refer to it.
Preface
(function(){…})() and (function (){…} ()) are two common ways of writing JavaScript functions to execute functions immediately. At first, I thought they were one Wrap the anonymous function in parentheses, then add a parentheses at the end to call the function, and finally achieve the purpose of executing the function immediately after it is defined. Later, it was discovered that the reason for adding the parentheses was not this.
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 have seen some custom controls, you will find that most of them follow this writing method:
(function() {
"
// 这里开始写功能需求
})();This is what we often call an immediate execution function (IIFE). As the name suggests, it means that this function executes the function body immediately and does not require you to actively call it. Generally, 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, a separate scope is formed inside IIFE, which can encapsulate some Private variables not readable by outsiders.
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 an example:
var f = function(){
console.log("f");
}
f();We find that f here is just a reference variable of this anonymous function, then since f () can call this function. Can I replace f with the function itself:
function(){
console.log("f");
}();After running, I get the following results:
Uncaught SyntaxError: Unexpected token (
The reason for this error is that the Javascript engine sees the function key After the word, it is considered that what follows is a function declaration statement and should not 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 */ }
};Primary school we I have learned that expressions enclosed with () will be executed first, like the following:
1+(2+3) //这里先运行小括号里面的内容没有意见撒
In fact, parentheses also 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 happens if the Javascript engine sees the parentheses first:
//用小括号把函数包裹起来
(function(){
console.log("f");
})();The function is successfully executed:
f //控制台输出
In this case, the Javascript engine will think that this is an expression, not a function Statement, of course there are many ways to make the Javascript engine think that this is an expression:
!function(){}();
+function(){}();
-function(){}();
~function(){}();
new function(){ /* code */ }
new function(){ /* code */ }() // 只有传递参数时，才需要最后那个圆括号。
……Back to the previous question, why is it said that the form of IIFE avoids polluting global variables? If you have seen others write The jquery plug-in usually has 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(), then the anonymous parameter is f (args) Right, here jquery is passed into the function as a parameter, then when the formal parameter $ is used inside the function, it will not affect the external environment, because some plug-ins also use the $ qualifier. The interior can be modified as desired.
Above, I referred to the following two articles during this process:
javascript executes a function immediately: think about function(){}() in the plug-in
Immediate execution function in JavaScript
Related recommendations:
Add operator before analysis function to implement immediate execution function
JavaScript anonymous, named function and immediate execution function IIFE detailed explanation
Immediate execution function in JS
The above is the detailed content of Detailed examples of immediate execution of functions 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
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
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
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
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.
