In-depth understanding of the JavaScript Scope series fifth

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 = +;        b = x + A;        return b;    }    Bar (a);    Bar (200);} 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 = +;        b = x + A;        return b;    }    Bar (a);    Bar (200);} 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"

The order in which the code executes is called the execution flow, and the program source code is not executed in the order of the Code, but in the order in which the function is called.

The execution flow in the example is the 1th row, 2nd row, line 4th, 15th row, 5th line, 7th Line, 12th line, 8th Line, 9th line, 10th line, and 11th line, and so on. Line 13th, 8th row, 9th row, 10th row, 11th line, 14th line

[note] The 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 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)

　　The "2" execution flow executes the 1th line of code var a = 1; lhs query for A, assigns a value of 1, executes the stream executes the 2nd line of code var B = 2, performs a LHS query on B, assigns a 2 "3" execution stream to B to execute the 15th line of code FN (0), and then executes the stream into FN (0) In the function execution environment, the code in the execution environment is declared the promotion process and the argument 0 is assigned to the parameter x. At this point in the execution environment stack there are two execution environment, the FN (0) function for the current execution flow in the execution environment "4" Execution flow execution 5th line of code var a = 10, a LHS query, give a value 10 "5" Execution stream execution line 12th bar (20), call Bar (20) function, At this 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 in the global scope is the code 2nd to find var B = 2, and then in the global execution environment to find the value of B is 2, so assigned to B 2 "6" execution stream executes the 8th line of code var a = 100; A is assigned 100; Execution flow executes line 9th B = x + A;, RHS query for X, find 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 10th code return b; RHS query for B, find the value of B is 120, so the function return value is 120 "7" After the execution flow executes the 10th line of code, the execution Environment of Bar (20) is ejected execution environment stack, and is destroyed, waiting for garbage collection, control is returned to the FN (0) function execution Environment "8" execution stream execution 13th line code bar (200), call bar (200) function, At this 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 () , and finally finds var B = 2 in the global scope, which is the 2nd line of code, and then finds the value of B in the global execution environment is 2, so assign a value to B2 "9" is the same as the 6th step, the execution stream executes the 8th line of code var a = 100, and A is assigned a value of 100; the execution flow executes line 9th B = x + A; RHS query x, find the value of X is 20, a RHS query, find a value is 100, so by calculating the value of B is 120, Assign a value of 120 to B, execute the 10th line of code return b;, RHS query B, find the value of B is 120, so the function return value of 120 "10" execution flow after the execution of the 10th line of code, bar (200) execution environment is ejected execution environment stack, and is destroyed, waiting for garbage collection, Control returned to the FN (0) function execution Environment "11" Execution flow execution 14th line code},FN (0) Execution environment 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 can be dynamically modified by using the Eval () function and the WITH statement

"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