JavaScript execution Environment and scope

The Execution Environment (Executin context) is one of the most important concepts in JS. The execution environment defines the behavior of other data that variables or functions have 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 the object. Although the code we write cannot access this object
, but the parser uses it in the background when it processes the data.

The global execution environment is one of the outermost execution environments. Depending on the hosting environment that JS implements, the objects that represent the execution environment are different. In a Web browser, the global execution environment is considered a Window object, so all global variables and functions are created as properties and methods of the Window object. After all code in an execution environment is executed, the environment is destroyed, and all the variables and function definitions stored therein are destroyed (the global execution environment is not destroyed until the application exits-for example, when the Web page or browser is closed);

Each function has its own execution environment. 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 the JS program is controlled by this convenient mechanism.

When code executes in an environment, a scope chain is created for the variable object. The purpose of a scope chain is to ensure an orderly access to all variables and functions that the execution environment has access to. The front end of the scope chain, which is always the variable object for the environment in which the code is currently executing. If the environment is a function, its active object (activation object) is used as the variable object. The active object initially contains only one variable, the arguments object (this object does not exist in the Global environment variable). The next variable object in the scope chain comes from the containing (external) environment, and the next variable object comes from the next containment environment. In this way, it continues to the global execution environment; The variable object of the global execution environment is always the last object in the scope.

Identifier parsing is the process of searching for identifiers along the scope level. The search process always starts at the front end of the scope chain and then goes backwards backward until the identifier is found (if an identifier is not found, this usually results in an error).

var color= "Blue"; function ChangeColor () {if (color=== ' blue ') {color= "red"}elsecolor= "Blue";} ChangeColor (); alert ("Color is now" +color);

In this simple example, the scope chain of the function ChangeColor () contains two objects: its own variable object (which defines the arguments object) and the variable object of the global environment. The variable color can be accessed inside the function because it can be found in this scope chain.

In addition, variables defined in the local scope can be used interchangeably with global variables in the local context.

var color= "Blue"; function ChangeColor () {var color1= "red"; function swapcolors () {var color2=color1;color1=color;// All variables can be accessed here}//can only access color1 and color;} You can only access Color;changecolor (); alert ("Color is now" +color);

The above code involves a total of three execution environments: the global environment, local variables of the ChangeColor (), and the local variable environment of swapcolors (). A method function can access global variables, but it cannot access local variables that are smaller than the scope of the method function, because both environments are its parent execution environment.

The internal environment can access all external environments through the scope chain, but the external environment cannot access any variables and functions in the internal environment. The linkages between these environments are linear and sequential. Each environment can search up the scope chain to query for variables and function names, but any environment cannot enter another execution environment by searching down the scope chain. In the above example, Swapcolors contains three objects: he will first search for variables and function names from his own variable object, and then search for the top-level scope chain if the search is not.

Extend the scope chain:

Although there are only two types of execution environments-Global and local. But there are other ways to extend the scope chain. Is that some statements can temporarily add a variable object to the front end of the scope chain, and the change object will be removed after the code executes. This is what happens in two more cases. Specifically, the scope will be extended when the execution stream enters any of the following statements:

The catch block of the Try-catch statement;

With statement;

Both statements add a variable object to the front of the scope chain. For the WITH statement, the specified object is added to the scope chain. For a catch statement, a new variable object is created that contains the declaration of the thrown error object.

var add = function (A, b) {if (typeof a!= "Number" | | typeof b!= "number") {throw{name: "type error", message: "parameter requires number Type"}}}try{add (1, "FG");} catch (E) {alert (e.name);} Finally{alert ("finally");}

The exception class is created when we execute to the if code, and we specify the name of the exception and the hint of the exception in the throw. The catch will create a new variable object, but in this object we can get the exception thrown, which is to create a new variable object, and its scope is extended.

There is no block-level scope:

JS without block-level scopes often leads to confusion in understanding. In me than

In the more familiar Java language, code enclosed by curly braces has its own scope. Thus, it is supported to define variables based on conditions.

if (true) {var color= "blue";} Alert (color)

After executing this code, the discovery can be printed as blue; in Java, the color variable is destroyed after the IF statement is executed. In our JS, the IF statement and the FOR Loop statement are added to the current execution environment, which is the global variable;

for (Var i=0;i<=10;i++) {}alert (i); 11

When the loop is executed, I has a value of 11, and some people say why this is not 10. I am also very strange, in the early morning JS inside this I print out should be 10, and later in order to distinguish between, after the end of the for Loop added again.

Declaring variables:

Variables declared with Var are automatically added to the nearest environment, which is what we call a function local environment, in which the closest environment is the function environment. If the variable is not declared using Var when initializing, the variable is automatically added to the global environment.

function Add (num1,num2) {Sum=num1+num2;return sum;} var result=add, alert (sum); 3

Query identifiers:

It's good to understand that when we need to read in an environment and reference an identifier to represent a particular meaning, you must search to determine the identifier. Search only from near to far, from local to global, from small to large, if the query to the corresponding identifier will stop the search;

var color= "Blue"; Marked as yellow function GetColor () {var color= "red";//marked in red return color;} Alert (GetColor ()); Red

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

JavaScript execution Environment and scope