In-depth understanding of the JavaScript Scope series fifth-a diagram to understand the execution environment and scope

xTable of Contents [1] illustration [2] concept [3] description [4] Summing up the previous words

For the Execution Environment (execution context) and scope (scope) is not easy to distinguish, and even many people think they are one thing, but the elevation and Rhino book about the scope of the two different translations. But in fact, they are not the same, but entangled with each other. This article first with a picture, and then the terminology of a simple explanation, and finally according to the contents of the diagram detailed description

Icon

View larger image

Concept

"Scope"

Scopes are a set of rules that determine where and how to locate identifiers. For LHS queries and RHS queries, see the first internal principle of the scope series.

Scopes are divided into lexical scopes and dynamic scopes. JavaScript uses lexical scopes, in short, lexical scopes are defined as scopes in the lexical phase and are determined by where the variables and functions are written when the code is written. Lexical scopes can also be described as areas of the program's source code that define variables and functions

Scope is divided into global scope and function scope, function scope can be nested with each other

In the following example, there are global scopes, FN scopes, and bar scopes, which are nested with each other

"Scope chains and free variables"

The nested relationships of the various scopes make up a chain of scopes. In the example, the chain of the bar function is saved as the global, and the FN function saves the scope chain is the FN-and global

The use of scope chains is primarily a query for identifiers, and identifier parsing is the process of searching identifiers at the level of the scope chain, and the scope chain is to ensure orderly access to variables and functions

"1" If the variable is declared in its own scope, it does not need to use a scope chain

In the following example, if you want to query variable A in the bar function, use the LHS query directly and assign a value of 100.

var a = 1; var b = 2; function fn (x) {    var a = ten;     function Bar (x) {        var a = +;         = x + A;         return b;    }    Bar (a);    Bar (n);} fn (0);

' 2 ' If the variable is not declared in its own scope, you need to use a scope chain to find

At this point, another concept, the free variable, arises. Variables that exist in the current scope but are not declared in the current scope are called free variables

In the following example, if you want to query variable B in the bar function, B is a free variable because B is not declared in the current scope. The scope chain of the bar function is the global, bar, FN, and so on. To the upper-level FN-scoped lookup B is not found, continue to the top-level global scope to find B, found B

var a = 1; var b = 2; function fn (x) {    var a = ten;     function Bar (x) {        var a = +;         = x + A;         return b;    }    Bar (a);    Bar (n);} fn (0);

[note] If the identifier is not found, it needs to be divided into RHS and LHS query for analysis, if it is LHS query, then declare the variable in the global environment, if the strict mode of LHS query, then throw Referenceerror (reference error) exception, if it is a RHS query, The Referenceerror (reference error) exception is thrown. Detailed information

"Execution Environment"

The execution Environment (execution context), sometimes referred to as the execution context, execution context, or environment, defines additional data that a variable or function has access to. Each execution environment has a variable object associated with it (variable object), and all variables and functions defined in the environment are stored in this object

This is an example of the execution environment of the FN (0) function when the code executes into the 15th row, and the execution environment holds the values of all variables and functions within the scope of the FN () function.

Execution flow Code Execution order is called the execution flow, the program source code is not in accordance with the code in the order of writing a line down, but the function of the call order in the example of the execution flow is the 1th line, 2nd row, 4th line, 15th row, 5th line, and 7th line Line 12th, 8th Row, 9th row, 10th row, 11th line, 13th line, 8th line, 9th line, 10th line, 11th line, and 14th line ] There is a process of compiling and declaring the promotion (hoisting) before the execution of the program code, in this case the assumption that the code is the code that has been declared after the promotion process

"Execution Environment Stack"

The execution environment stack is similar to the scope chain, and preserves the execution environment that exists in the current program in an orderly manner. When the execution flow enters a function, the environment of the function is pushed into an environment stack. After the function executes, the stack pops up its environment and returns control to the previous execution environment. The execution flow in a JavaScript program is controlled by this convenient mechanism.

In the example, when the execution flow enters the bar (20) function, the execution environment stack of the current program is shown, where the yellow bar (20) Execution environment indicates that the current program is in this execution environment

When the bar (20) function is completed, the execution environment stack of the current program as shown, the bar (20) function execution environment is destroyed, waiting for garbage collection, control is returned to the yellow background of the FN (0) execution Environment

Description

The following is a detailed description of the diagram in the order in which the code executes the flow

The "1" code execution stream goes into the global execution environment, and the code in the global execution environment enters the declaration elevation (hoisting)

"2" Execution flow execution line 1th codevar a = 1;, a LHS query for a, assign a value of 1; Execution flow executes line 2nd of codevar b = 2;, the B is LHS query, the B is assigned a value of 2 "3" execution stream execution 15th line of codefn (0);, call the FN (0) function, at which point the execution flow enters the FN (0) function execution Environment, declares the promotion procedure for the Code in the execution environment, and assigns the argument 0 to the parameter x. At this point, there are two execution environments in the execution environment stack, and the FN (0) function executes the 5th line of code for the execution Environment "4" execution stream where the current execution flow is executingvar a = ten;, a LHS query to a, assigning a value of 10 "5" Execution stream execution line 12th codeBar (a);, call the bar (20) function, at which point the execution flow enters the bar (20) function execution environment, declares the promotion procedure for the Code in the execution environment, and assigns the argument 20 to the parameter x. At this point in the execution environment stack there are three execution environments, the bar (20) function is the execution environment where the current execution flow is in the process of declaring the promotion, because B is a free variable, need to through the bar () function of the scope chain bar (), FN (), the global scope to find, Finally found in the global scope, which is the 2nd line of code.var b = 2;, and then find the value of B in the global execution environment is 2, so give B a value of 2 "6" execution stream execution 8th line of codevar a = +;, assigning a value of 100; Execution flow Execution Line 9thB = x + A;, the X is RHS query, found that the value of X is 20, a RHS query, find a value is 100, so by calculating the value of B is 120, to B assignment 120; Execute line 10threturn B;, b RHS query, found that the value of B is 120, so the function return value of 120 "7" After the execution of the flow of the 10th line of code, bar (20) Execution environment is ejected execution environment stack, and is destroyed, waiting for garbage collection, control back to the FN (0) function execution Environment "8" Execution flow execution Line 13th codebar (+);, call the bar (200) function, at which point the execution flow enters the bar (200) function execution environment, declares the promotion procedure for the Code in the execution environment, and assigns the argument 200 to the parameter x. There are three execution environments in the execution environment stack, the bar (200) function is the same execution environment as the current execution flow and the 5th step, in the process of declaring Ascension, because B is a free variable, it needs to be looked up through the global scope of the bar () function's scope chain bar () , which is eventually found in the global scope, which is the 2nd line of code.var b = 2;, and then finds the value of B in the global execution environment is 2, so assigning B to 2 "9" is the same as the 6th step, the execution stream executes the 8th line of codevar a = +;, assigning a value of 100; Execution flow Execution Line 9thB = x + A;, the X is RHS query, found that the value of X is 20, a RHS query, find a value is 100, so by calculating the value of B is 120, to B assignment 120; Execute line 10threturn B;, b RHS query, found that the value of B is 120, so the function return value of 120 "10" after the execution of the flow of the 10th line of code, bar (200) execution environment is ejected execution environment stack, and is destroyed, waiting for garbage collection, control back to the FN (0) function execution Environment "11" Execution flow Execution line 14th code}, the execution environment of FN (0) is ejected execution environment stack, and is destroyed, waiting for garbage collection, control is returned to the global execution environment "12" when the page closes, the global execution environment is destroyed, the page has no execution Environment summary

"1" JavaScript uses a lexical scope. For a function, the lexical scope is determined when the function is defined, regardless of whether the function is called. Scopes allow you to know what variables and functions are in scope, but you don't know what the value of the variable is. So the scope is static

[note] The scope chain can be dynamically modified with the Eval () statement, the WITH statement, and the Try-catch statement, which is described in detail in the next article.

"2" for a function, the execution environment is determined at the time of the function call, and the execution environment contains the values of all variables and functions within the scope. Under the same scope, different invocations (such as passing different parameters) produce different execution environments, resulting in different values for variables. So the execution environment is dynamic.

In-depth understanding of the JavaScript Scope series fifth-a diagram to understand the execution environment and scope