JavaScript closure (Closure) detailed

Closures are a difficulty and a feature of Javascript. Many advanced applications rely on closures.

Here are my study notes, which should be useful for Javascript beginners.

First, the scope of variables

To understand closures, you must first understand Javascript's special variable scope

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

Javascript is special in that global variables can be read directly inside functions.

var n = 999;
 
 function f1 () {
Alert (n);
}
 
F1 (); // 999
On the other hand, it is naturally impossible to read local variables inside a function outside the function.

function f1 () {
 var n = 999;
}
 
Alert (n); // error
One thing to note here is that when you declare variables inside a function, you must use the var command. If not, you actually declared a global variable!

function f1 () {
N = 999;
}
 
F1 ();
 
Alert (n); // 999
How to read local variables from the outside?

For various reasons, we sometimes need to get local variables inside a function. However, as mentioned earlier, under normal circumstances, this is not possible and can only be achieved through workarounds.

That is, inside the function, define another function.

function f1 () {
 
 var n = 999;
 
 function f2 () {
Alert (n); // 999
}
 
}
In the above code, the function f2 is included in the function f1. At this time, all local variables in f1 are visible to f2. But the opposite is not true. The local variables inside f2 are not visible to f1. This is the unique "chain scope" structure of the Javascript language. Child objects will look up all the variables of the parent object level by level. Therefore, all the variables of the parent object are visible to the child object, otherwise it is not true.

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

function f1 () {
 
 var n = 999;
 
 function f2 () {
Alert (n);
}
 
 return f2;
 
}
 
 var result = f1 ();
 
Result (); // 999
The concept of closures

The f2 function in the previous code is a closure.

The definition of "closure" in various professional literature is very abstract and difficult to read. My understanding is that closures are functions that can read variables inside other functions.

Because in Javascript, only sub-functions inside functions can read local variables, you can simply understand closures as "functions defined inside a function."

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

Fourth, the use of closures

Closures can be used in many places. It has two most useful uses. One is to read the variables inside the function mentioned earlier, and the other is to keep the values of these variables in memory.

How to understand this sentence? Please see the code below.

function f1 () {
Var n = 999;
AddnAdd = 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 ran twice, with a value of 999 for the first time and a value of 1000 for the second time. This proves that the local variable n in function f1 has been kept in memory and has not been automatically cleared after f1 is called.

Why is this so? The reason is that f1 is the parent function of f2, and f2 is assigned to a global variable, which causes f2 to always be in memory, and the existence of f2 depends on f1, so f1 is also always in memory, not after the call ends , Is collected by the garbage collection mechanism.

Another thing worth noting in this code is the "nAdd = function () {n + = 1}" line. First, the var keyword is not used before nAdd, so nAdd is a global variable, not a local variable. Secondly, the value of nAdd is an anonymous function, and this anonymous function is also a closure, so nAdd is equivalent to a setter, which can operate on local variables inside the function outside the function.

V. Points to note when using closures

1) Because closures will cause variables in functions to be stored in memory, memory consumption is very large, so you cannot abuse closures, otherwise it will cause web page performance problems and may cause memory leaks in IE. The solution is to delete all unused local variables before exiting the function.

2) The closure will change the value of the variable inside the parent function outside the parent function. Therefore, if you use the parent function as an object, the closure as its public method, and the internal variable as its private value, you must be careful, not Change the value of the variable inside the parent function at will.

Thinking questions

If you can understand the results of the following two pieces of code, you should even understand the operation mechanism of closures.

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 that = this;
Return function () {
Return that.name;
};
}
};
Alert (object.getNameFunc () ());
I believe that many people will always encounter some problems and bottlenecks when they are new to the front-end or mid-term. For example, if they have no sense of direction for a period of time or persist, they will not learn how to solve it. Some materials like my article. If you want to discuss and learn with more senior Daniel, please join my learning exchange group 907694362