Learn JavaScript closures (Closure)

The following is a blog from Nanyi

closures (closure) are a difficult and unique feature of the JavaScript language. Very many advanced applications rely on closures to implement them.

Here is my study note, which is very useful for people who have just started learning JavaScript.

The scope of a variable

To understand closures, you must first understand the special variable scope of JavaScript.

The scope of a variable is nothing more than two kinds: global variables and local variables.

The special language of JavaScript. Is that the global variables can be read directly inside the function.

var n=999;

Function F1 () {
alert (n);
}

F1 (); 999

There is one more aspect. A local variable inside a function cannot be read naturally outside the function.

Function F1 () {
var n=999;
}

alert (n); Error

Here's a place to be aware that when declaring variables inside a function, be sure to use the var command. If not, you actually declare a global variable!

Function F1 () {
n=999;
}

F1 ();

alert (n); 999

Second, how to read the local variables from the outside?

For a variety of reasons. We sometimes need to get local variables inside the function. But. It's been said before, normally. This is not possible, only through the use of alternative skills to achieve.

That is, in the inside of the function, define a function.

Function F1 () {

var n=999;

function F2 () {
alert (n); 999
}

}

In the code above. The function f2 is included inside the function F1, when all local variables within the F1 are inside. are visible to the F2.

But the reverse is not possible, F2 internal variables, the F1 is not visible. This is the "chain-scoped" structure (chain scope) that is unique to the JavaScript language. The child object looks up the variables for all the parent objects, first-level.

Therefore, all the variables of the parent object are visible to the child object. Conversely, it is not established.

Now that F2 is able to read the local variables in the F1, it simply takes the F2 as the return value. We're not going to be able to read its internal variables outside of the F1!

Function F1 () {

var n=999;

function F2 () {
alert (n);  
}

return F2;

}

var result=f1 ();

Result (); 999

Three, the concept of closure

The F2 function in the previous section of the code. is closures.

The definition of "closure" (closure) in various professional literature is very abstract. Very ugly to understand. My understanding is that closures are functions that can read other functions ' internal variables.

Because in the JavaScript language, only sub-functions within the function can read local variables, so it is possible to simply interpret the closure as "a function defined within a function".

So, in essence, a closure is a bridge that connects the inside of the function to the outside of the function.

Iv. use of closures

Closures can be used in many places.

Its maximum usefulness is two, one of the previously mentioned variables that can read inside the function, and the other is to keep the values of these variables in memory at all times.

How to understand this sentence? Take a look at the following code.

Function F1 () {

var n=999;

Nadd=function () {n+=1}

function F2 () {
alert (n);
}

return F2;

}

var result=f1 ();

Result (); 999

Nadd ();

Result (); 1000

In this code, result is actually the closure F2 function.

It performed altogether two times, the first time the value is 999. The value for the second time is 1000. This proves that the local variable n in the function F1 has been kept in memory and has not been actively purged by itself after the F1 call.

Why is that? The reason is that F1 is the parent function of F2, and F2 is assigned to a global variable. This causes F2 to always be in memory, while the presence of F2 depends on F1, so F1 is always in memory. Not after the call ends. Reclaimed by the garbage collection mechanism (garbage collection).

Another notable part of this code is the line "nadd=function () {n+=1}". First, Varkeyword is not used in front of Nadd, so Nadd is a global variable, not a local variable.

Second, the value of Nadd is an anonymous function (anonymous functions), and the anonymous function itself is a closure, so nadd is equivalent to a setter that can manipulate local variables inside the function outside of the function.

V. Note points for using closures

1) Because the closure will make the variables in the function are stored in memory, memory consumption is very large, so can not abuse closures, otherwise it will cause the performance of the Web page, in IE may cause memory leaks. The workaround is to delete all the local variables that are not used before exiting the function.

2) The closure changes the value of the inner variable of the parent function outside the parent function. So, if you use the parent function as an object, and the closure as its common method, and the internal variable as its private property (private value), be careful not to arbitrarily change the value of the internal variable of the parent function.

Liu, study questions

Suppose you can understand the results of the following two code execution. The implementation mechanism of closures should be understood.

Code snippet one.

var name = "the window";

var object = {
Name: "My Object",

Getnamefunc:function () {
return function () {
return this.name;
};

}

};

Alert (Object.getnamefunc () ());

Code snippet two.

var name = "the window";

var object = {
Name: "My Object",

Getnamefunc:function () {
var = this;
return function () {
return that.name;
};

}

};

Alert (Object.getnamefunc () ());

Finish

Learn JavaScript closures (Closure)