How closures work

Closures (Closure) are a very important feature in the JavaScript language

In the JavaScript language, only sub-functions in a function can refer to variables in a function, in short, closures are functions defined in functions, which are bridges inside and outside the function.

The meaning of closures is that the current scope always has access to variables in the outer scope, and the function is the only structure that has its own scope, so the creation of closures depends on the function

Scope of the variable

Closures are a difficult point in the JavaScript language, and before you understand closures, you should understand the scope of variables.

Global variables, local variables are the only two forms of the scope of variables; In general, global variables can be referenced in any scope, while local variables can only be referenced in the current scope. Let's look at the code below .

var number = 1;var Get_number = function () {console.log (number);}; Get_number ();

The output is 1; this is a global variable that can be referenced in any scope. And look at the code below.

var get_number = function () {var number = 1;}; Console.log (number);

The output is referenceerror:number are not defined; This is a local variable that cannot be referenced in an external scope and cannot be run after the function. Then look at the code below

var get_number = function () {var number = 1;}; Get_number (); Console.log (number);

The output is the same as above; it should be noted that the declaration of a local variable must use the var command, otherwise the equivalent of declaring a global variable after running the function. The code looks like this

var get_number = function () {number = 1;}; Get_number (); Console.log (number);

The output is 1; Here is actually a declaration of a global variable

Referencing local variables

Normally, a local variable can only be referenced in a function. Let's look at the code below.

var get_number = function () {var number = 1;var Out_number = function () {Console.log (number + +);};o Ut_number ();}; Get_number ();

The output is 1; a child function can refer to a variable in the current scope, which is actually a characteristic structure in the JavaScript language-the scope chain (scope Chain). Now that the child function can refer to the variable, then we return the child function, is it possible to reference the variable in the external scope. The code looks like this

var get_number = function () {var number = 1;var Out_number = function () {Console.log (number + +);}; return out_number;}; var r = Get_number (); R ();

The output is 1, and we continue to execute R (), the output value is incremented by--2, 3, 4, 5, and this value is stored in memory, the Out_number sub-function is the closure we are going to discuss.

Use of closures

The two main functions of closures, one is to read the variables in the function, and the other is to store the values of the variables in the function in memory. Let's look at the code below.

var get_number = function () {var number = 1;return {plus:function () {number ++;},out:function () {return number;}};}; var r = Get_number (); R.plus (); R.out ();

The return value is 2, 2 closures Plus, out all maintain a reference to the Get_number external scope, and in the current scope, the get_number outer scope can only be accessed through these 2 closures. The code looks like this

var get_number = function () {var number = 1;return {plus:function () {number ++;},out:function () {return number;}};}; var r = Get_number (); r.change = function () {number = 0;};
R.change (); R.plus (); R.out ();

The return value is as above; R.change does not change the value of the variable number in the Get_number outer scope, it simply declares or overrides the global variable

A closure can change the value of a variable in a function outside the function, and if you use the function as a private property as an object, as a closure, as a method, as a local variable, the value of the variable is changed, and the value of the variable in the function is stored in memory and the memory consumption is very large, so the result of the abuse closure is Memory leaks can occur in IE

How closures work