An in-depth understanding of the immediate execution functions (function () {...}) in JavaScript ()

This article mainly describes the in-depth understanding of JavaScript in the immediate execution function, immediately execute the function is called immediately call the function, usually it is written in (function () {...}) () wrapping the business code, using jquery is more common, the need for friends can refer to the following http://www.jb51.net/article/50967.htm

JavaScript is more casual than other programming languages, so the JavaScript code is filled with a variety of exotic writing, sometimes mirrors, and of course, the ability to understand the various types of writing is a further understanding of the JavaScript language features.

(function () {...}) () and (function () {...} ()) is a common way of writing two JavaScript functions immediately, initially I thought it was a parenthesis wrapping an anonymous function, followed by parentheses to call a function, and finally to the function definition immediately after the purpose of execution, and later found that the reason for parentheses is not so. To understand the immediate execution of a function, you need to first understand some basic concepts of functions.

function declarations, function expressions, anonymous functions

function declaration: Functions fnname () {...}; Declare a function using the function keyword, and then specify a name for the functions, called the function declaration.

function expression var fnname = function () {...}; Declaring a function with the function keyword, but not naming it, and finally assigning an anonymous function to a variable called a function expression, is the most common form of function expression syntax.

Anonymous functions: Function () {}; Declaring a function using the functions keyword, but not naming the function, so called anonymous functions, anonymous functions are function expressions, anonymous functions have many functions, assigning a variable to create a function, assigning an event to an event handler or creating a closure, and so on.

The difference between a function declaration and a function expression is that the JavaScript engine will ' function declaration elevation ' (function declaration hoisting) Functions declaration on the current execution environment (scope) when parsing JavaScript code. The function expression must wait until the JAVASCIRTP engine executes to its row to parse the function expression from the top and the next line, and the function expression can be called immediately after it is appended with parentheses, and the function declaration cannot be called only in the form of FnName (). Here are two examples of the difference between the two.

Copy CodeThe code is as follows:
FnName ();
function FnName () {
...
}
Normal, because the function declaration is ' promoted ', the function call can precede the function declaration

FnName ();
var fnname=function () {
...
}
Error, variable fnname has not saved a reference to the function, the function call must be after the function expressionCopy CodeThe code is as follows:
var fnname=function () {
Alert (' Hello world ');
}();
The function expression is appended with parentheses, and the function is called immediately when the JavaScript engine resolves here
function FnName () {
Alert (' Hello world ');
}();
No error is made, but the JavaScript engine only resolves function declarations, ignores the following parentheses, and the function declaration is not called
function () {
Console.log (' Hello world ');
}();
Syntax error, although the anonymous function is a function expression, but the assignment operation is not performed,
So the JavaScript engine takes the function keyword at the beginning as a functional declaration, an error: Requires a name

After understanding some basic concepts of function, look back (function () {...}) () and (function () {...} ()) The two methods of immediately executing the function, initially I thought it was a parenthesis wrapped anonymous function, and the following parentheses immediately call the function, then do not know why the parentheses, and then understand that to the function body after the parentheses can be called immediately, then this function must be a function expression, not a function declaration.

Copy CodeThe code is as follows:
(function (a) {
Console.log (a); Firebug output 123, using the () operator
}) (123);

(function (a) {
Console.log (a); Firebug output 1234, using the () operator
} (1234));

!function (a) {
Console.log (a); Firebug output 12345, use! Operator
} (12345);

+function (a) {
Console.log (a); Firebug output 123456, using the + operator
} (123456);

-function (a) {
Console.log (a); Firebug output 1234567, using-operator
} (1234567);

var fn=function (a) {
Console.log (a); Firebug output 12345678, using the = operator
} (12345678)

You can see the output and add it in front of the function! , +,-even a comma wait for the effect to be executed immediately after the function definition, and (),! , + 、-、 =, and so on, all function declarations are converted into function expressions, eliminating the ambiguity of the JavaScript engine recognition function expressions and function declarations, telling the JavaScript engine that this is a function expression, not a function declaration, you can add parentheses after it, and immediately execute the code of the function.

Parentheses are the safest thing to do, because! , +,-et operators also operate on the return values of functions, sometimes causing unnecessary hassles.

But what is the use of such a notation?

The concept of a private scope in JavaScript, if you declare some variables in a global or local scope on a multi-person project, may be overridden by someone else accidentally with a variable of the same name, depending on the nature of the scope chain of the JavaScript function, You can use this technique to mimic a private scope, use an anonymous function as a "container," inside the container to access external variables, and the external environment to access variables inside the container, so (function () {...}) () internally defined variables do not collide with external variables, commonly known as "anonymous wrapper" or "namespace."

jquery uses this method to wrap the jquery code in the (function (window,undefined) {...} jquery code ...} (window), when you invoke jquery code in the global scope, you can achieve the protection of jquery internal variables.

This article is a personal understanding of the collation, if there are errors in the welcome point of view, the text of the views from:

The JavaScript authority Guide, JavaScript advanced programming

An in-depth understanding of the immediate execution functions (function () {...}) in JavaScript ()