JavaScript-execution environment and scope, and javascript-execution

JavaScript-execution environment and scope, and javascript-execution

The execution environment (execution context) is the most important concept of JavaScript. The execution environment defines other data that variables or functions have the right to access and determines their respective behaviors. Each execution environment has a variable object associated with it. All variables and functions defined in the environment are stored in this object. Although the code we wrote cannot access this object, the parser will use it in the background when processing data.

The global execution environment is the most peripheral execution environment. In a Web browser, the global execution environment is considered a window object. Therefore, all global variables and functions are created as properties and methods of the window object.

Each function has its own execution environment. Each function has a variable object associated with it during execution. For a function, it is also called an activity object. When the execution flow enters a function, the function environment is pushed into an environment stack. After the function is executed, the stack pops up its environment and the control is returned to the previous execution environment.

When the code is executed in an environment, a scope chain of the variable object is created ). The purpose of the scope chain is to ensure orderly access to all variables and functions that the execution environment has the right to access. The front end of the scope chain is always the variable object in the environment where the code is currently executed. If the current execution environment is a function, the variable object is the activity object of the function. The activity object contains only one variable (arguments object) at the beginning, as mentioned in the introduction to the function. The next variable object in the domain is from the external environment that contains the variable, and the next variable object is from the next stage. In this way, continue 1 to the global execution environment. The variable window in the global execution environment is always the last object in the function chain field.

Before analyzing specific examples, let's take a look at the JavaScript running sequence.
If a document stream contains multiple script code segments (JavaScript code separated by script tags or imported js files), the running sequence is:
Step 1. Read the first code segment (the js execution engine does not execute the program in one row, but analyzes and executes the program in one row)
Step 2. Perform syntax analysis. If there is a mistake, a syntax error is reported (for example, parentheses do not match), and jump to Step 5.
Step 3. Perform "pre-resolution" on var variables and function definitions (no error will be reported because only the correct declaration is parsed)
Step 4. Execute the code segment. If there is an error, an error is returned (for example, the variable is undefined)
Step 5. If there is another code segment, read the next code segment and repeat Step 2.
Step 6. Complete.

Pay attention to the red section above. Parsing JavaScript identifiers is the process of searching identifiers at the scope level. The search process always starts from the front-end of the scope, that is, from the environment where the currently executed code is located, and then goes back (or up) Step by step until the identifier is found, if you cannot find it, an error is usually sent.

var arg = 1;function test(){alert(arg); //100 //var arg = 1;}arg = 100;test();

In the preceding example, if the arg identifier is not found in the current scope of the test function, the arg variable is linked along the scope to the upper scope. In the upper scope, the arg variable is found, before the test function is called, The arg variable is assigned a value of 100, so alert (arg) will output 100. However, if we uncomment the line in the test function, the situation will change.

var arg = 1;function test(){alert(arg); //undefinedvar arg = 1;}arg = 100;test();

In this case, alert (arg) displays undefined because the arg variable is defined in the current scope of the test function, when we execute the test function, we find this variable in the current scope, so we will not look up the variable along the scope chain. However, the arg variable is defined after the alert method. Therefore, when executing the alert method, the default value of arg is used, that is, undefined. The above code is equivalent:

var arg = 1;function test(){var arg;alert(arg); //undefinedarg = 1;}arg = 100;test();