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!