JavaScript executes functions immediately

Source: Internet
Author: User

JavaScript is more casual than other programming languages, so the JavaScript code is filled with all kinds of wonderful writing, sometimes mirrors;
Of course, the ability to understand the various types of writing is also a further understanding of JavaScript language features.
(function () {...}) () and (function () {...} ()) is a common notation for two JavaScript functions to be executed immediately;
At first I thought it was a parenthesis wrapping an anonymous function, and then adding parentheses to the function, and then executing it immediately after the function definition was reached;
This was not the reason why the parentheses were later found. 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.

Function declarations differ from function expressions:

The JavaScript engine, when parsing JavaScript code, "function declaration elevation" (function declaration hoisting) Functions declaration on the current execution environment (scope), 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;

Second, the function expression can be called immediately after the function, function declaration can not, can only be called in FnName () Form.

Example:

FnName ();
functionFnName () {
...
}
//Normal, because the function declaration is "lifted", 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 expressionvar fnname =function(){
Alert ("Hello World");
}();
the//function expression is appended with parentheses, and the function can be called immediately when the JavaScript engine resolves to this point
functionFnName () {
Alert ("Hello World");
}();
//will not error, but the JavaScript engine only resolves function declarations, ignoring the following parentheses, function declarations are 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 declaration of functions, an error: Requires a name

After understanding some basic concepts of function, look back (function () {...}) () and (function () {...} ()) These two methods of executing functions immediately,
At first I thought it was a parenthesis wrapping an anonymous function, and the following parentheses immediately called the function, and then did not know why the parentheses were added;
Later, the function must be a function expression, not a function declaration, to be called immediately after adding parentheses around the body.

(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 later, And immediately executes the code for 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 is not used in JavaScript, and if multiple people develop projects that declare variables in global or local scope, they may be overwritten with variables of the same name accidentally by someone else.

Depending on the nature of the JavaScript function's scope chain, you can use this technique to mimic a private scope, use an anonymous function as a "container", have access to external variables inside the container, and the external environment cannot 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.



Article excerpt from: JS (function () {...}) () immediately execute function comprehension



Author: Yang Tao

Source: Http://www.cnblogs.com/useryangtao

This blog post is for communication only and should not be used for commercial purposes. If you want to reprint, please be sure to indicate the source.



JavaScript executes functions immediately

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.