Learn Javascript closure (Closure) knowledge

1. The scope of variables

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

There are only two types of scopes of variables: global variables and local variables.

The special feature of Javascript language is that global variables can be read directly within functions.

 var n=999; function f1(){ alert(n); } f1(); // 999

On the other hand, local variables inside the function are naturally not read outside the function.

 function f1(){ var n=999; } alert(n); // error

There is a place to note here. When declaring variables internally, you must use the var command. If not, you actually declare a global variable!

 function f1(){ n=999; } f1(); alert(n); // 999

2. How to read local variables from the outside?

For various reasons, we sometimes need to get local variables within the function. However, as mentioned earlier, under normal circumstances, this cannot be done and can only be achieved through workarounds.

That is to define another function inside the function.

 function f1(){ var n=999; function f2(){ alert(n); // 999 } }

In the above code, function f2 is included inside function f1, and all local variables inside f1 are visible to f2. But the other way around is not possible. Local variables inside f2 are invisible to f1. This is the "chain scope" structure unique to the Javascript language. The child objects will look upwards level by level for all parent objects variables. Therefore, all 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 used as the return value, can't we read its internal variables outside f1?

 function f1(){ var n=999; function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999

3. The concept of closure

The f2 function in the previous section of the code is the closure.

The definition of "closure" in various professional documents is very abstract and difficult to understand. My understanding is that a closure is a function that can read variables inside other functions.

Since in Javascript language, only subfunctions inside functions can read local variables, closures can be simply understood as "functions defined inside a function".

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

4. The purpose of closure

Closures can be used in many places. It has two biggest uses, one is that the variables inside the function can be read as mentioned above, and the other is that the values of these variables are always kept in memory.

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

 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 runs twice in total, the first value is 999 and the second value is 1000. This proves that the local variable n in function f1 has been kept in memory and is not automatically cleared after f1 is called.

Why is this happening? 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. Therefore, f1 is always in memory and will not be recycled by the garbage collection mechanism after the call is finished.

Another noteworthy point in this code is that the line "nAdd=function(){n+=1}" is first 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 itself is also a closure, so nAdd is equivalent to a setter, which can operate on local variables inside the function outside the function.

5. Notes on using closures

1) Since closures will cause all variables in the function to be stored in memory, and the memory consumption is very large, closures cannot be abused, otherwise it will cause performance problems of the web page and may lead to memory leakage in IE. The solution is to delete all local variables that are not used 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, use the closure as its public method, and use the internal variable as its private property, be careful not to change the value of the internal variable of the parent function at will.