Summary of anonymous self-executed functions in javascirpt

Source: Internet
Author: User

An anonymous function is a function without a name and can be automatically executed. For example, a function () {}) () is a function. Let's take a look at some usage of an anonymous function.

Looking at the js files of many websites, the first function is usually an anonymous self-executed function, such as (function () {}) (). It has two functions, first, it is anonymous, and there are anonymous internal classes in java, which have similar functions. Anonymity means that there is no name for the function, which makes it impossible for the function to access the interior of the anonymous self-executed function, preventing mutual interference between variable names between functions, for example, two people write two JavaScript codes and place them on the same webpage. If they do not use anonymous function packages, the functions of these two js files will call each other, resulting in errors.

How can I access functions in anonymous functions? The window is usually added before the function or variable, so that the function or variable becomes global. On the same page, even different js files can be accessed, therefore, you only need to add jquery to a page. js, then other js files can be accessed using jquery. functions in js.

Another role of anonymous self-execution functions is self-execution. In fact, as long as the code is written in the js file, as long as the function type is not included, it will be executed, and its role is a bit like onload, however, onload is executed only after the page is loaded. It does not need to be used. Therefore, if it wants to call a page element, it must be placed before the anonymous self-execution function, otherwise, an error occurs.

1. What are self-executed anonymous functions?

It refers to a function like this: (function {// code })();


2. Questions

Why (function {// code}) (); can be executed, but function {// code} (); returns an error?


3. Analysis

(1) first, we need to know the differences between the two:
(Function {// code}) is an expression, and function {// code} is a function declaration.
(2). Second, features of js "pre-compilation:
In the "pre-compilation" phase, js will explain the function declaration, but will ignore the table type.
(3 ). when js executes function () {// code} ();, because function () {// code} has been explained in the "pre-compiled" stage, js will skip function () {// code} and attempt to execute ();, so an error will be reported;
When js executes (function {// code}) ();, because (function {// code}) is an expression, js will solve it to get the return value, because the return value is a function, when (); is encountered, it will be executed.


In jquery, the anonymous self-execution function is nested in the anonymous self-execution function, as shown in

The Code is as follows: Copy code

(Function (){

Var a = function (){};

(Function (){

A ()

})();

})();

In this way, self-invocation is implemented. The anonymous self-execution function in the anonymous self-execution function can call the upper-level function. This is also a bit like java. the variables and methods in the class are transparent to internal departments and classes. So we don't need to add a window before a = function a. Let's look down.


One way to declare a function:

The Code is as follows: Copy code

Var afun = function (){

Alert (1 );

};

Afun is a function. It is accurate to the variables or pointers of a function. If afun is not written, then:

The Code is as follows: Copy code

Function (){

Alert (1 );

};

It is an anonymous function, because there is no name, but it does exist in the memory. We can't directly call a function without a name. To call a function, we need to add a pair of parentheses to the function name, such as afun (). What can an anonymous function do? Although there is no name, it can pass itself as a variable to other functions, such:

The Code is as follows: Copy code

Var fun = function (afunction ){

If (typeof afunction = "function "){

Afunction ();

}

}

Fun (function (){

Alert (1 );

});

Although there is no name when defining this function, after it is passed to fun, it has a name in the fun function, and the name is afunction. This usage is actually very common, for example:

The Code is as follows: Copy code

Dojo. connect ("adiv", "onclick", function (){

Alert ("onclick ");

});

Another usage of anonymous functions is self-execution. After the function name is followed by a pair of (), this function is executed. The following bracket expression defines a function, and the return value of the bracket expression is this function:

The Code is as follows: Copy code

(Function (){

Alert (1 );

});

After adding () to the brackets, execute the function returned by the brackets expression:

The Code is as follows: Copy code

(Function (){

Alert (1 );

})();

This is an anonymous self-execution function. First, it has no name. Second, it will be executed directly after definition, and it cannot be executed again because it has no name. You can pass parameters in an anonymous self-executed function:

The Code is as follows: Copy code

(Function (I ){

Alert (I );

}) (1 );

Anonymous self-execution functions are useful in many ways. They are mainly used for encapsulation. For example, the source code of jquery or dojo is found to be encapsulated in anonymous self-execution functions, in this way, the page can be automatically initialized when it is loaded, and the attributes and methods that it wants to publish can be made public externally. Temporary variables used can be securely enclosed in anonymous functions.

Related Article

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.