1. It is called anonymous function that runs immediately (also called the function that calls immediately)
2. When an anonymous function is enclosed and then a bracket is added to the rear, the anonymous function can be run immediately! Is there something magical?
3. To use a function, we must first declare its existence. The most common way we use is to define a function using function statement
4. Function object
Function objects are inherent objects in JavaScript, and all functions are actually a Function object.
Let’s first look at whether the Function object can directly use the constructor to create a new function? The answer is yes.
var abc = new Function("x","y","return x*y;"); alert(abc(2,3)); // "6"5. Anonymous functions do not have names, so it is extended to the question of how we should call them (O_O)?
Calling of anonymous functions①
var abc=function(x,y){ return x+y; } alert(abc(2,3)); // "5"The above operation is actually equivalent to defining a function in a different way. This usage is something we encounter more frequently.
For example, when we set up a DOM element event handler function, we usually do not name them, but instead give its corresponding event a reference to an anonymous function.
Calling anonymous function②
Use() to enclose the anonymous function, and then add a pair of brackets (including the parameter list).
alert((new Function("x","y","return x*y;"))(2,3));// "6"6. What is the role of brackets?
Brackets can divide our expressions into chunks, and each piece, that is, each pair of braces, has a return value. This return value is actually the return value of the expression in brackets.
Therefore, when we enclose an anonymous function with a pair of brackets, the parentheses return a Function object of an anonymous function.
Therefore, adding anonymous functions to the bracket pair is like a named function and we obtain its reference position. So if you add a parameter list after this reference variable, the call form of the ordinary function will be implemented.
7. Function declarations, function expressions, anonymous functions
Function declaration: function fnName () {…}; Use the function keyword to declare a function, and then specify a function name, called function declaration.
Function expression var fnName = function () {…};Declare a function using the function keyword, but does not name the function. Finally, the anonymous function is assigned a variable, called a function expression, which is the most common form of function expression syntax.
Anonymous function: function () {}; Use the function keyword to declare a function, but the function is not named, so it is called anonymous function. Anonymous functions belong to function expressions. Anonymous functions have many functions. If you assign a variable, you create a function, and if you assign an event, you become an event handler or create a closure, etc.
The difference between function declaration and function expression is that
1. When the Javascript engine parses javascript code, it will 'function declaration hoisting' (Function declaration Hoisting) function declaration on the current execution environment (scope). Function expressions must wait until the Javascirtp engine executes to its line before parsing the function expression from top to bottom line.
2. The function expression can be called immediately with brackets after it. The function declaration cannot be done and can only be called in the form of fnName().
Chestnut①
fnName();function fnName(){...}//Normal, because 'promoting' the function declaration, the function call can be fnName();var fnName=function(){...}//An error is reported, the variable fnName has not saved a reference to the function, and the function call must be after the function expressionChestnut②
var fnName=function(){alert('Hello World');}();//Parcels are added after the function expression. When the javascript engine parses here, the function can be called immediately when the javascript engine parses here function fnName(){alert('Hello World');}();//There will not be an error, but the javascript engine only parses the function declaration, ignores the subsequent parentheses, and the function declaration will not be called function(){console.log('Hello World'); }();//The syntax error, although anonymous functions belong to function expressions, no assignment operation is performed, //So the javascript engine treats the function keyword at the beginning as a function declaration, and reports an error: a function name is requiredIf you want to add brackets after the function body, you can call it immediately, then this function must be a function expression, not a function declaration.
Chestnut③
(function(a){console.log(a); //firebug output 123, use the () operator})(123);(function(a){console.log(a); //firebug output 1234, use the () 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)You can see the output result and add it before the function! , +, - and even commas can be used to execute immediately after the function is defined, and (),! Operators such as +, -, = convert function declarations into function expressions, eliminating the ambiguity between the javascript engine identifying 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 execute the function's code immediately.
Adding brackets is the safest way to do it, because! Operators such as , +, and - will also perform operations with the function's return value, which sometimes causes unnecessary trouble.
But what's the use of writing this way?
There is no concept of private scope in JavaScript. If you declare some variables in global or local scope on a project developed by multiple people, it may be overwritten by others with the same name. According to the characteristics of the scope chain of JavaScript functions, this technique can be used to imitate a private scope and use an anonymous function as a "container". The "container" can access external variables, while the external environment cannot access variables inside the "container", so the variables defined inside ( function(){…} )() will not conflict with external variables, commonly known as "anonymous wrapper" or "namespace".
JQuery uses this method. When JQuery code is wrapped in ( function (window, undefined){…jquery code…} (window), it can protect the internal variables of JQuery when calling JQuery code in the global scope.