Brief description of the scope and closure of JS

Scope: It refers to the code space that has access to a variable and a method, in JS, the scope is maintained in the function. Represents the area in which a variable or function works, referring to the context in which they are executed, i.e. the context execution environment. There are only two scopes for javascript: global scope and local scope, and local scopes are distinguished by functions.

closure : In JS, my understanding is the function nesting function, when the inner function is referenced outside the scope of the definition of it, it creates the closure of the inner function, if the intrinsic function refers to the variables located in the external function, when the external function calls, these variables in memory will not be freed, Because closures require them.

The scope of nesting will form a scope chain, and the nesting of functions will form a closure. Closures and scope chains are one of the important features of JavaScript that distinguishes it from other languages.

There are two scopes in scope javascript: function scope and global scope. Variables declared in a function and parameters of the function have the same scope, that is, the function scope.

An example of a simple function scope:

function foo () {

var bar = 1; {

var bar = 2;

}

return bar; 2

}

Unlike other block-scoped languages such as C, this will always return 2. Global scope, which can be understood by the browser as a Window object (node. JS is global):

var bar = 1;function Foo () {}alert (Window.bar); 1alert (Window.foo); "Function foo () {}" is a global scope for both the variable bar and the function foo, which is a property of window. When a scope chain accesses a variable in JavaScript, it begins with local variables and parameters, traversing the scope up and down through the global scope.

var scope = 0, zero = "Global-scope";(function () {var scope = 1, one = "scope-1";(function () {var scope = 2, and both = "scope-2" ;(function () {var scope = 3, three = "scope-3";//Scope-3 scope-2 scope-1 global-scopeconsole.log ([Three, one, one, ZERO].J Oin ("")); Console.log (scope); 3}); Console.log (typeof three); Undefinedconsole.log (scope); 2}); Console.log (typeof); Undefinedconsole.log (scope); 1}); Console.log (typeof one); Undefinedconsole.log (scope); 0 in the innermost function, each variable can be traversed and output. In the second-to-last function, the variable three cannot be traversed, so the output is undefined.

As an example of a popular point, when you are ready to spend money on something, you will feel your wallet first, and you can ask your father for it without you, and your father will never find your grandfather again. And when your dad doesn't have the money to buy things, he's not going to come looking for you.

Closures in one function, define another function, called function nesting. The nesting of functions will form a closure. Closures are complementary to scope chains, and the nesting of functions creates a closure at the same time as multiple scopes of chain relationships.

function bind (func, target) {return function () {func.apply (target, arguments);};} So how do you understand closures?

External functions cannot access inline function external functions and cannot access parameters and variables of inline functions, and inline functions can access parameters and variables of external functions in exchange for a statement:

The inline function contains the scope of the external function. Let's take a look at the example of the scope chain we talked about earlier, this time from the closure point of view:

var scope = 0, zero = "Global-scope";(function () {var scope = 1, one = "scope-1";(function () {var scope = 2, and both = "scope-2" ;(function () {var scope = 3, three = "scope-3";//Scope-3 scope-2 scope-1 global-scopeconsole.log ([Three, one, one, ZERO].J Oin ("")); Console.log (scope); 3}); Console.log (typeof three); Undefinedconsole.log (scope); 2}); Console.log (typeof); Undefinedconsole.log (scope); 1}); Console.log (typeof one); Undefinedconsole.log (scope); 0 The innermost function can access all variables defined inside and outside of it. The second-to-last function does not have access to the innermost variable, and the innermost scope = 3 Assignment does not have an effect on the variable with the same name outside it.

Another way to understand closures: each time an external function is called, the inline function is created once, when it is created, the scope of the external function (including any local variables, parameters, and so on) becomes part of the internal state of each inline function object, even after the external function finishes executing and exiting, looking at the following example:

var i, list = [];for (i = 0; i < 2; i + = 1) {List.push (function () {console.log (i);});} List.foreach (function (func) {func ();});

We will get two "2" instead of the expected "1" and "2" because the variable i accessed by the two functions in the list is the same variable in its previous level scope. We changed the code to use closures to solve the problem: var i, list = [];

for (i = 0; i < 2; i + = 1)

{List.push (function (j)

{return function ()

{Console.log (j);

};

})

(i));

}

+list.foreach (function (func)

{func ();

});

The outer "immediate execution function" receives a parameter variable I, which exists as a parameter J within its function, and it points to the same reference as the name J in the returned inner function. After the outer function executes and exits, the parameter J (whose value is now the current value of i) becomes part of the state of the inner layer function is preserved.

Brief description of the scope and closure of JS