JS Scope chain

Scope chain

If you want to learn JavaScript well, there are three places that must be carefully mastered: two chains, one pack.

Two chains: Scope Chain and prototype chain

One pack: Closures in JavaScript

1. Scope

There is no block-level scope in JavaScript, and scope partitioning is accomplished through function functions. The area outside the function is the global scope, and the area inside the function is the local scope.

2. Global variables and local variables

The variables defined in the global scope are "global variables"

Variables defined in local scope we call them "local variables".

However, global variables and local variables are also relative, and there are special forms of the following:

3. The access relationship between variables and scopes

Global variables can be introduced in the global scope, and global variables can be referenced in local scopes as well as local variables.

However, local variables cannot be accessed at the global scope, as shown in:

There are two main reasons:

① Scope not allowed

② is affected by the JavaScript garbage collection mechanism

JavaScript garbage collection mechanism:

When the function is finished, all local variables inside it are automatically reclaimed by memory, which is the garbage collection mechanism.

?

Question: Why can a global variable be referenced in a local scope?

Answer: Affected by the scope chain

4. Scope Chain

In the local role, after referencing a variable, the system will automatically look for the Var declaration statement in the current scope, if it is found to use directly, otherwise continue to go up in the scope of the Var declaration statement, if not found, continue to look for the upper scope ... The variable is automatically declared in the global scope until the declaration statement for the VAR is not found in the global scope. We call this chain of query relationships a "scope chain."

?

Example 1: Use the principle of a scope chain to parse the following code

Run Result: 10

Parsing: When we execute the display function, the system automatically executes the 13th line of code, because a variable i is referenced in the local scope, so according to the principle of the scope chain, the system first looks for the Var declaration statement in the current scope, but is not found, Therefore, we continue to look for the declaration statement of VAR in the first-level scope, we find the declaration statement of VAR in the global scope, so the result 10 is popped directly.

?

Example 2: Use the scope chain principle to resolve the execution results of the following code

Run Result: 100

Parsing: The system first defines a global variable var i = 10 in the global scope, then defines a function fn1 in 12 lines of code, then proceeds down, executes the FN1 function on line 24th, and then goes into the FN1 function to execute the code, defining a local variable var in line 13th i= 100, then continue to define the FN2 function and execute it on line 22nd, then execute the FN2 function and define and execute the FN3 function inside it, because the variable i is used inside the FN3 function, it will automatically find the declaration statement of Var in the current scope, and then go to the fn2 to find it, and not find it. Continue to look up in the FN1 function, find the Var i=100, so directly use the variable, the entire program execution result is 100.

?

Example 3: Improve the title, say the execution result of the program

In JavaScript, the code is executed from top to bottom, so the above code first defines a global variable I equals 10 in line 10th, then defines a fn1 function in 12 lines of code and executes it in 24 rows, then goes inside the FN1 function to continue execution, Because of the use of a variable i in line 13th, but it is not declared, so according to the principle of the scope chain, the system will automatically look for VAR declaration statement in the current scope, not found is automatically up to the first-level scope to find, found var i = 10 is directly used, covering the global I, The code then continues to execute the definition fn2 and executes, defines the FN3 and executes, because within the FN3 function, the variable i is introduced, and, according to the principle of the scope chain, continues to look upward until the global scope, because the variable i in the global has been overwritten with 100, so the final result is 100.

5. Scope CHAIN schematic diagram

JS Scope chain