In-depth understanding of the immediate execution function (function(){…})()_Basic knowledge 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 can sometimes seem like smoke and mirrors. Of course, being able to understand all kinds of writing methods is also a deeper understanding of the characteristics of the JavaScript language.

( 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 added The parentheses 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 the same. To understand the immediate execution of functions, you need to first understand some basic concepts of functions.

Function declaration, function expression, anonymous function

Function declaration: function fnName () {…}; Use the function keyword to declare a function, and then specify a function name, which is called a function declaration.

Function expression var fnName = function () {…}; Use the function keyword to declare a function, but do not give the function a name. Finally, the anonymous function is assigned to a variable, called a function expression. This is the most common function expression. grammatical form.

Anonymous function: function () {}; Use the function keyword to declare a function, but do not give the function a name, so it is called an anonymous function. Anonymous functions belong to function expressions. Anonymous functions have many functions. When assigned to a variable, a function is created , assigning an event becomes an event handler or creates a closure, etc.

The difference between function declaration and function expression is that 1. When the Javascript engine parses the javascript code, it will 'function declaration hoisting' the function declaration on the current execution environment (scope), while the function expression You must wait until the Javascirtp engine reaches the line where it is executed before parsing the function expression line by line from top to bottom. 2. You can add parentheses after the function expression to call the function immediately. Function declaration is not allowed and can only be called fnName() form call. Here are two examples of the difference.

Copy code The code is as follows:

fnName();
function fnName(){
 …
}
//Normal, because the function declaration is 'promoted', the function call can be made before the function declaration

fnName();
var fnName=function( ){
 …
}
//Error, the variable fnName has not saved a reference to the function, the function call must be after the function expression

Copy code The code is as follows:

var fnName=function(){
alert( 'Hello World');
}();
//Add parentheses after the function expression. When the javascript engine parses this, the function can be called immediately
function fnName(){
alert( 'Hello World');
}();
//No error will be reported, but the javascript engine only parses the function declaration and ignores the following brackets. The function declaration will not be called
function(){
console.log('Hello World');
}();
//Syntax error, although the anonymous function is a function expression, no assignment operation is performed,
//So the javascript engine will start The function keyword is used as a function declaration, and an error is reported: A function name is required

After understanding some basic concepts of functions, I looked back at the two ways of writing functions that execute functions immediately (function(){…})() and (function (){…} ()). At first, I thought they were the same Wrap an anonymous function in parentheses, and add a parentheses after it to call the function immediately. I didn’t know why the parentheses were added at the time, but later I realized that if you want to add parentheses after the function body to call it immediately, the function must be a function expression, not a function declaration. .

Copy code The code is as follows:

(function(a){
console.log (a); //firebug output 123, use () operator
})(123);

(function(a){
console.log(a); //firebug output 1234, use () operator
}(1234));

!function(a){
console.log(a); //firebug output 12345, use! Operator
}(12345);

function(a){
console.log(a); //firebug output 123456, use operator
}(123456);

-function(a){
console.log(a); //firebug output 1234567, use - operator
}(1234567);

var fn=function(a ){
console.log(a); //firebug output 12345678, use = operator
}(12345678)

To see the output, add it in front of function! , , - or even commas can have the effect of executing the function immediately after it is defined, while (),! Operators such as , , - and = all convert function declarations into function expressions, eliminating the ambiguity between the JavaScript engine in identifying function expressions and function declarations, and telling the JavaScript engine that this is a function expression, not a function declaration, and can be used later. Add parentheses and execute the function's code immediately.

Adding parentheses is the safest thing to do, because! Operators such as , , - will also perform operations with the return value of the function, sometimes causing unnecessary trouble.

But what is the use of writing like this?

There is no concept of private scope in JavaScript. If you declare some variables in the global or local scope on a project developed by multiple people, they may be overwritten by other people accidentally using variables with the same name. According to the characteristics of JavaScript function scope chain, this technology can be used to imitate a private scope and use anonymous functions as a "container". External variables can be accessed inside the "container", but the external environment cannot access the variables inside the "container". variables, so the variables defined inside (function(){…})()() will not conflict with external variables, commonly known as "anonymous wrapper" or "namespace".

JQuery uses this method. Wrap the JQuery code in (function (window, undefined){...jquery code...} (window). When calling the JQuery code in the global scope, you can protect JQuery internal variables.

This article is a compilation of personal understanding. If there are any errors, please point them out. The views in the article are referenced from:

"Javascript Authoritative Guide", "Javascript Advanced Programming"