JS Closed Package

This first introduces the concept of closures, because we use closures in many places, especially in many advanced applications.

First, closure of the concept

Closures (closure) are functions that can read other functions ' internal variables.

In JavaScript, only a child function inside the function can read a local variable, so the closure can be understood as a " child function defined inside the function ".

In essence, closures are bridges that connect internal functions and external functions, and we should learn to understand the structure of the bridge in order to make better use of the bridge.

Second, how to read the internal variables?

We already know that closures are functions that can read variables inside other functions, so how do we read the internal variables?

1, let us first understand the scope of the variable , because first understand the scope of the variable to know why we need to use closures to read internal variables.

The scope of a variable is generally divided into two categories: global variables and local variables .

Internal functions can read global variables, but external functions cannot read local variables.

eg

var a=9;

function Demo1 () {

alert (a);

}

Demo1 ();//9

function Demo2 () {

var a=9;

}

alert (a);//error

Note: Be sure to use VAR when declaring variables internally, otherwise global variables.

function Demo3 () {

a=9;

}

Demo3 ();

alert (a);//9

In JS we often need to use the internal variables of the function, then we can in the inside of the function, in the definition of a function:

function Demo1 () {

a=9;

function Demo2 () {

alert (a);//9

}

}

Explanation: In the above Code, DEMO2 () is included in the Demo1 (), the variable Demo2 () in Demo1 () is available, and vice versa. This is the "chain-scoped" structure of JavaScript (chain scope).

a child object looks up a variable of the parent object first-level, and is available, or vice versa.

2, since Demo2 () can read the local variables of Demo1 (), then as long as the Demo2 () as a return value , you can read the DEMO1 () variables inside.

function Demo1 () {

a=9;

function Demo2 () {

alert (a);

}

return DEMO2;

}

var result=demo1 ();

Result ();//9

Third, the use of closures

Closures are used up to two places:

① is an intrinsic variable that can read a function as mentioned earlier.

② is to keep the values of these variables in memory forever.

Let's take a look at the code below. ~~~~~~~~~~~~~~~~~~~~~~~

Funciton Demo1 () {

var a=9;

Add=function () {

A+=1;

}

function Demo2 () {

alert (a);

}

return DEMO2;

}

var result=demo1 ();

Reault ();//9

Add ();

Result ();//10

Explanation: Here Reault is actually the closure Demo2 () function, which runs two times, the first time is 9, and the second time is 10. This proves that the local variable a of function demo1 () is kept in memory.

Since Demo1 () is the parent of Demo2 (), and Demo2 () is assigned a global variable (because it returns DEMO2 (), Demo1 assignment is actually DEMO2 assignment), causing Demo2 to always be in memory, so Demo1 is also in memory, is not recycled by the garbage collection mechanism (garbage collection).

Four, closure of the attention point

1, because the closure will make the function of the variables 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 lead to memory leaks. The workaround is to remove all unused local variables before exiting the function.

2. The closure will change 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 public method, and the internal variable as its private property (private value), be careful not to arbitrarily change the value of the inner variable of the parent function.

JS Closed Package