Deep Understanding (function () {...}) (); _jquery

1. He is called an anonymous function that runs immediately (also called a function called immediately)

2. When an anonymous function is enclosed and followed by a parenthesis, the anonymous function can be run immediately! There are wood is very magical oh ~

3. To use a function, we have to declare its existence first. And our most common approach is to use function statements to define a function

4.Function objects

A function object is an intrinsic object in JavaScript, and all functions are actually objects of a function.

Let's take a look at it, can the function object create a new function directly using the constructor? The answer is yes.

var abc = new Function ("X", "Y", "return x*y;"); 

5. Anonymous functions simply do not have a name, so it extends to how we should invoke their problem (o_o)?

Calls to anonymous functions ①

var abc=function (x,y) {return 
x+y; 
} 

The above operation is tantamount to changing the way to define the function, this usage is more frequently encountered by us.

For example, when we set up a DOM element event handler, we usually do not give them a name, but instead give it a corresponding event that references an anonymous function.

Calls to anonymous functions ②

Use () to enclose the anonymous function, followed by a pair of parentheses (including the argument list).

6. What is the function of parentheses?

Parentheses can divide our expression into chunks, and each piece, that is, each pair of parentheses, has a return value. This return value is actually the return value of an expression in parentheses.

So, when we enclose the anonymous function with a pair of parentheses, the parentheses are actually returned, which is the function object for the anonymous functions.

Therefore, the parentheses and the anonymous function are the names of the functions we have to get its reference position. So if you add the argument list after this reference variable, you implement the calling form of the normal function.

7. function declaration, function expression, anonymous function

function declaration: Functions fnname () {...}; Use the function keyword to declare a function, and then specify a function name, called a function declaration.

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

anonymous function: function () {}; Declaring a function with the function keyword, but not naming it, is called an anonymous function, an anonymous function is a function expression, and an anonymous function has many functions, giving 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

First, the JavaScript engine will ' function declaration elevation ' (function declaration hoisting) The functions declared on the current execution environment (scope) when parsing JavaScript code. The function expression must wait until the JAVASCIRTP engine executes its line to parse the function expression from the top and the next line.

Second, the function expression can be immediately called with parentheses to call the function, the function declaration can not be called only in the form of FnName ().

Chestnut ①

FnName ();
function FnName () {
...
}
Normal, because the ' Ascend ' function declaration, the function call can be fnname () before the function declaration
;
var fnname=function () {
...
}
Error, variable fnname has not yet saved a reference to the function, the function call must be after the function expression

Chestnut ②

var fnname=function () {
alert (' Hello world ');
} ();
The function expression is followed by parentheses, which can be invoked immediately when the JavaScript engine resolves to the function
FnName () {
alert (' Hello world ');
} ();
There is no error, but the JavaScript engine only resolves the function declaration, ignoring the parentheses behind it, and the function declaration will not be invoked
() {
console.log (' Hello World '); 
} ();
Syntax error, although the anonymous function is part of a function expression, but no assignment operation,
//So the JavaScript engine takes the first function keyword as a functional declaration, an error: The request requires a function name

To be called immediately after the function body is appended with parentheses, the function must be a function expression, not a function declaration.

Chestnut ③

(function (a) {
console.log (a);//firebug output 123, using () operator
}) (123);
(function (a) {
console.log (a);//firebug output 1234, using () 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 the-operator
} (1234567);
var fn=function (a) {
console.log (a);//firebug output 12345678, using = operator
} (12345678)

You can see the output, in front of the function Plus! , +,-even commas wait until they can be executed immediately after the function definition, and (),! , + 、-、 = operator, all convert function declarations to function expressions, eliminating the ambiguity of JavaScript engine recognition function expressions and function declarations, telling the JavaScript engine that this is a function expression, not a function declaration, can be followed by parentheses, and executes the function's code immediately.

Braces are the safest way to do it because! , +,-and so on, can also be calculated with the return value of the function, sometimes causing unnecessary trouble.

But what is the use of this writing?

The notion of a private scope in JavaScript, if you declare variables in a global or local scope on a project that has been developed by many people, may be accidentally overwritten by someone else with the same name, depending on the characteristics of a JavaScript function's scope chain, You can use this technique to mimic a private scope, with anonymous functions as a "container" where external variables can be accessed within the container, and the external environment cannot access variables inside the container, so (function () {...}) () internally defined variables do not conflict with external variables, commonly known as "anonymous wrapper" or "namespace".

This is what jquery uses to wrap jquery code in (function (window,undefined) {... jquery code ...} (window), you can protect jquery internal variables by calling jquery code in a global scope.