The closure in JS

The scope of a variable

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

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

JS Code

var n=999;

Function F1 () {

alert (n);

}

F1 ();//999

On the other hand, local variables inside the function cannot be read naturally outside the function.

JS Code

Funtion F1 () {

var n=999;

}

alert (n); Error

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: In the inside of the function, we define a function.

JS Code

Function F1 () {

n-999;

function F2 () {

alert (n);//999

}

}

In the above code, the function F2 is included inside the function F1, and all local variables inside the F1 are visible to the F2. But the opposite is not possible, F2 internal variables, the F1 is not visible. This is the JavaScript language-specific "chain-scoped" structure (chain scope)

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, and vice versa.

Since F2 can read the local variables in the F1, we can not read its internal variables outside the F1 as long as the F2 is the return value!

JS Code

Function F1 () {

n=999;

function F2 () {

alert (n);

}

return F2;

}

var result F1 ();

Result (); 999

Concept of three closures

The F2 () above is the closure.

In JavaScript, only sub-functions inside the function can read local variables, so the closure can be simply understood as

"Defines a function inside a function. ”

So, in essence, closures are a bridge that connects functions inside and outside.

The purpose of the four-closure package

1. You can read the variables inside the function.

2. You can keep the values of these variables in memory at all times.

JS 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 piece of code, result is actually the F2 function. It runs altogether two times, the first value is 999, the second value is 1000. This proves that the local variable n in the function F1 has been

is stored in memory, and the presence of F2 depends on F1, so F1 is always in memory and will not be reclaimed by garbage after the call ends.

Another notable part of this code is the line "nadd=function () {n+=1}", which first did not use the var keyword 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 this

The anonymous function itself is also 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 remove all unused local variables 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, take the closure as its common method, and take the internal variable as its private property (private value), then be careful not to casually

Change the value of the inner variable of the parent function.

JS Code

function Outerfun ()
{
var a=0;
function Innerfun ()
{
a++;
alert (a);
}
return innerfun; Watch this.
}
var obj=outerfun ();
obj (); Result is 1
obj (); Result is 2
var obj2=outerfun ();
Obj2 (); Result is 1
Obj2 (); Result is 2

Vi. What is closures?

When an intrinsic function is referenced outside the scope that defines it, the inner function's closure is created, and if the intrinsic function references a variable that is located outside the function, when the external function is called, the variables are not freed in memory because the closures require them.

The official explanation is that closures are an expression (usually a function) that has many variables and environments that bind them, and so these variables are also part of the expression.
It is believed that very few people can read this sentence directly because he describes it as too academic. In fact, the phrase is:all the function in JavaScript is a closed packet . In general, however, the nested function produces a more powerful closure, which is what we call "closures" most of the time. Look at the following code:

return b;
}
var C = A ();
C ();

There are two features of this code:

1. function b is nested inside function A;

2, function a returns function B.

Referential relationships

So after executing var c=a (), the variable C actually points to function B, and then C () pops up a window showing the value of I (first 1). This code actually creates a closure, why? Because the variable C outside of function A refers to function B in function A, that is:

　　When function A's intrinsic function B is referenced by a variable outside of function A, a closure is created.

Let's talk a little more thoroughly. A "closure" is a method function that defines another function as the target object in the body of the constructor, and the method function of the object in turn refers to the temporary variable in the outer function body. This makes it possible to indirectly maintain the value of temporary variables used by the original constructor body as long as the target object retains its method throughout its lifetime. Although the initial constructor call has ended, the name of the temporary variable disappears, but the value of the variable is always referenced within the method of the target object, and the value can only be accessed through this method. Even if the same constructor is called again, but only new objects and methods are generated, the new temporary variable only corresponds to the new value, and the last time the call was separate.

What is the role of closures?

In short, the function of a closure is that after a executes and returns, the closure makes the garbage collection mechanism of the JavaScript GC does not reclaim the resources used by a, because the execution of the internal function B of a requires a dependency on the variables in a.

Viii. the garbage collection mechanism of JavaScript

In JavaScript, if an object is no longer referenced, the object is recycled by the GC. If two objects are referenced by each other and are no longer referenced by the 3rd, the two objects that are referenced to each other are also recycled. Because function A is referenced by B and B is referenced by an outside C, this is why function A is not recycled after execution.

The closure in JS