It takes you one minute to understand JavaScript closures.

What is a closure? First read the code: functiona () {varn0; functioninc () {n ++; console. log (n) ;}inc (); inc () ;}a (); console input...

What is a closure?

First look at a piece of code:

Function a () {var n = 0; function inc () {n ++; console. log (n) ;}inc (); inc () ;}a (); // The console outputs 1 and 2.

Simple. Let's take a look at the Code:

Function a () {var n = 0; this. inc = function () {n ++; console. log (n) ;};} var c = new a (); c. inc (); // The console outputs 1c. inc (); // console output 2

Simple.

What is a closure? This is the closure!

All the functions that have the right to access variables in another function scope are closures. Here, the inc function accesses the Variable n in constructor a and forms a closure.

Let's take a look at the Code:

Function a () {var n = 0; function inc () {n ++; console. log (n) ;}return inc;} var c = a (); c (); // console output 1c (); // console output 2

Let's see how it is executed:

Var c = couter (), the couter () returns the function inc, which is equivalent to var c = inc;

C (), this sentence is equivalent to inc (); note that the function name is only an identifier (pointer to the function), and () is the execution function.

Var c = inc; inc (); is it different from the first code? No.

What is a closure? This is the closure!

All textbooks use the last section to describe the closure, but I think this will complicate the problem. The function name is returned here. Those who have not read tan haoqiang's C/C ++ programming may not suddenly reflect the difference with no (). That is to say, this writing method comes with a trap. Although this writing method is more advanced, I still like to unify the problem. If you look at code 1 and Code 2, you will also struggle with function calls. Will you tangle with n values?

Common traps

Look at this:

function createFunctions(){    var result = new Array();    for (var i=0; i < 10; i++){        result[i] = function(){            return i;        };    }    return result;}var funcs = createFunctions();for (var i=0; i < funcs.length; i++){    console.log(funcs[i]());}

At first glance, the output is 0 ~ 9, never expected to output 10 10?

The trap here is: The function band () is the execution function! A simple var f = function () {alert ('Hi') ;}; the window will not pop up, followed by an f (); to execute the code inside the function. The above code is translated as follows:

Var result = new Array (), I; result [0] = function () {return I ;}; // The function is not executed and remains unchanged inside the function, I in the function cannot be replaced! Result [1] = function () {return I ;}; // The function is not executed and remains unchanged inside the function. You cannot replace the I in the function !... Result [9] = function () {return I ;}; // The function is not executed and remains unchanged inside the function. You cannot replace the I in the function! I = 10; funcs = result; result = null; console. log (I); // funcs [0] () is to execute the return I statement, that is, to return 10console. log (I); // funcs [1] () is to execute the return I statement, that is, to return 10... console. log (I); // funcs [9] () is to execute the return I statement, that is, to return 10

Why is I not collected after only garbage collection? Because I is still being referenced by function. For example, in a restaurant, there is always a limited number of dishes, so the waiter will go to the patrol station to recycle empty dishes, but how can he accept dishes? Of course, if you manually drop the dishes (= null) in the plate, the plate will be taken away. This is the so-called memory recycle mechanism.

As for how the I value can be retained, in fact, there should be nothing to worry about from the beginning of the article. Should I have one less dish?

To sum up

A closure is the variable that a function references to another function. Because the variable is referenced, It is not recycled. Therefore, it can be used to encapsulate a private variable. This is both an advantage and a disadvantage. Unnecessary closures only increase memory consumption! In addition, when using closures, pay attention to whether the value of the variable meets your requirements, because it is like a static private variable. Closures usually mix and match with many things. If you have more contact with each other, you can get a better understanding of things. Here we just start to talk about the basic things.

The above is the content that will take you one minute to understand the JavaScript closure. For more information, see the PHP Chinese website (www.php1.cn )!