Detailed explanation of the use of javascript scope and closure_Basic knowledge

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

Scope
There are two types of scope in JavaScript: function scope and global scope.

Variables declared in a function and the parameters of the function share the same scope, that is, the function scope. A simple example of function scope:

Copy code The code is as follows:

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, for browsers, can be understood as the window object (Node.js is global):

Copy code The code is as follows:

var bar = 1;
function foo() {}
alert(window.bar); // 1
alert(window.foo) ; // "function foo() {}"

Both the variable bar and the function foo belong to the global scope and are both attributes of window.

Scope chain
When accessing a variable in JavaScript, it will start from local variables and parameters and traverse the scope step by step until it reaches the global scope.

Copy code The code is as follows:

var scope = 0, zero = "global-scope" ;
(function(){
var scope = 1, one = "scope-1";
(function(){
var scope = 2, two = "scope-2";
(function(){
var scope = 3, three = "scope-3";
scope-1 global-scope
console.log([three, two, one, zero].join(" "));
              console.log(scope); // 3
           })(); 🎜> console.log(scope); // 2
})();
console.log(typeof two); // undefined
console.log(scope); // 1
})();
console.log(typeof one); // undefined
console.log(scope); // 0

In the innermost function, each variable can be traversed step by step and output. In the penultimate layer of functions, the variable three cannot be found by traversal, so undefined is output.

To give a simple example, when you are going to spend money to buy something, you will first touch your wallet. If you don’t have it, you can ask your dad for it. If your dad doesn’t have it, you can ask your grandpa... And when your dad doesn’t have money to buy something, he won’t come to you to ask for it.

Closure

In one function, defining another function is called function nesting. The nesting of functions will form a closure.

Closures and scope chains complement each other. The nesting of functions not only creates multiple scopes in a chain relationship, but also forms a closure.

Copy code The code is as follows:

function bind(func, target) {

return function() {
func.apply(target, arguments);
};
}

So how do you understand closure?

External functions cannot access embedded functions

External functions cannot access parameters and variables of embedded functions

But embedded functions can access parameters and variables of external functions
In other words: embedded functions Contains the scope of the external function
Let’s look at the scope chain example mentioned before, this time understanding it from the perspective of closure:

Copy code The code is as follows:

var scope = 0, zero = "global-scope";
(function(){
var scope = 1, one = "scope-1";
(function() {
var scope = 2, two = "scope-2";
(function(){
var scope = 3, three = "scope-3";
// scope-3 scope -2 scope-1 global-scope
console.log([three, two, one, zero].join(" "));
console.log(scope); // 3
}) ();
console.log(typeof three); // undefined
console.log(scope); // 2
})();
console.log(typeof two); / / undefined
console.log(scope); // 1
})();
console.log(typeof one); // undefined
console.log(scope); // 0

The innermost function can access all variables defined internally and externally. The penultimate layer function cannot access the innermost variable. At the same time, the assignment operation of scope = 3 in the innermost layer does not affect the external variable of the same name.

Let’s understand closure from another angle:

Each time an external function is called, the embedded function will be created once
When it is created, the scope of the external function (including any local variables, parameters, etc. context) will become each embedded function object part of the internal state, even after the external function completes execution and exits
See the following example:

Copy code The code is as follows:

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

We will get "2" twice instead of the expected "1" and "2". This is because the variable i accessed by the two functions in the list is the same variable in the upper scope. .

Let’s change the code to use closures to solve this problem:

Copy code The code is as follows:

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 in the form of parameter j within its function. It points to the same reference as the name j in the returned inner function. After the outer function executes and exits, parameter j (its value is the current value of i at this time) becomes part of the state of its inner function and is saved.