In-depth analysis of javascript immediate execution function_javascript skills

Javascript is more casual than other programming languages, 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 types of writing is also a further in-depth understanding of the characteristics of the JavaScript language.

JavaScript function syntax

A function is a block of code wrapped in curly braces, preceded by the keyword function:

function functionname()
{
Here is the code to execute
}

When this function is called, the code within the function will be executed.

Functions can be called directly when an event occurs (such as when the user clicks a button) and can be called from anywhere by JavaScript.

Tip: JavaScript is case-sensitive. The keyword function must be lowercase, and the function must be called with the same case as the function name.

( function(){…} )() and ( function (){…} () ) are two common ways of writing JavaScript functions to execute functions immediately;

At first I thought it was an anonymous function wrapped in parentheses, and then a parentheses were added at the end to call the function. Finally, the purpose of executing the function immediately after it was defined was achieved;
It was later discovered that the reason for the parentheses was not that. 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, assign the anonymous function to a variable, called a function expression. This is the most common function. Expression syntax 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:

1. When the Javascript engine parses the JavaScript code, it will "Function declaration Hoisting" the function declaration on the current execution environment (scope), and the function expression must wait until the Javascirtp engine executes the line where it is located. Only then will the function expression be parsed 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 in the form of fnName().

Example:

 fnName(); 
 function fnName(){ 
  ... 
 } 
 //正常,因为"提升"了函数声明,函数调用可在函数声明之前 
 fnName(); 
 var fnName = function(){ 
  ... 
 } //报错,变量fnName还未保存对函数的引用,函数调用必须在函数表达式之后
 var fnName = function(){ 
  alert("Hello World"); 
 }(); 
 //函数表达式后面加括号,当javascript引擎解析到此处时能立即调用函数 
 function fnName(){ 
  alert("Hello World"); 
 }(); 
 //不会报错,但是javascript引擎只解析函数声明,忽略后面的括号,函数声明不会被调用 
 function(){ 
  console.log("Hello World"); 
 }();
 //语法错误,虽然匿名函数属于函数表达式,但是未进行赋值操作, 
//所以javascript引擎将开头的function关键字当做函数声明,

Error: A function name is required

After understanding some basic concepts of functions, let’s look back at ( function(){…} )() and ( function (){…} () ) two ways of writing functions that execute immediately,

At first I thought it was an anonymous function wrapped in parentheses, followed by a parentheses to call the function immediately. I didn’t know why the parentheses were added at the time;

I later understood 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.

 ( function(a){ 
  console.log(a); //firebug输出123,使用()运算符 
 })(123); 
 ( function(a){ 
  console.log(a); //firebug输出1234,使用()运算符 
 }(1234)); 
 ! function(a){ 
  console.log(a); //firebug输出12345,使用！运算符 
 }(12345); 
 + function(a){ 
  console.log(a); //firebug输出123456,使用+运算符 
 }(123456); 
 - function(a){ 
  console.log(a); //firebug输出1234567,使用-运算符 
 }(1234567); 
 var fn= function(a){ 
  console.log(a); //firebug输出12345678,使用=运算符 
 }(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, and (),! 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 brackets is the safest way, 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 a project is developed by multiple people and some variables are declared in the global or local scope, they may be overwritten by other people accidentally using variables with the same name.

According to the characteristics of JavaScript function scope chain, you can use this technology 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 "container" "Internal variables, so variables defined inside (function(){...})() will not conflict with external variables, commonly known as "anonymous wrapper" or "namespace".

JQuery uses this method, wrapping 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

The above content is the javascript immediate execution function introduced by the editor to you. I hope you like it.