Cliché native JS execution Environment and scope _javascript skills

First, we need to know that the execution environment and scope are two completely different concepts.

Each invocation of a function has a closely related scope and execution environment. Fundamentally, scopes are based on functions, and the execution environment is object-based (for example, the global execution environment is the window object).

In other words, the scope involves access to variables in the called function, and different invocation scenarios are not the same. The execution environment is always the value of the This keyword, which is a reference to the object that owns the currently executing code. Each execution environment has a variable object associated with it, and all variables and functions defined in the environment are stored in this object. Although the code we write does not have access to this object, the parser uses it in the background when it processes the data.

Execution environment (also called execution context –execution contexts)

When the JavaScript interpreter initializes the execution code, it first defaults to the global execution environment, and from now on, each invocation of the function creates a new execution environment.

Each function has its own execution environment. When the execution stream enters a function, the environment of the function is pushed into an environment stack (execution stack). After the function is finished, the stack pops up its environment and returns control to the previous execution environment. The execution flow in the ECMAScript program is controlled by this convenient mechanism.

The execution environment can be divided into two phases: creation and execution. At the creation stage, the parser first creates a variable object (variable object, also known as the active object activation objects), which consists of variables, function declarations, and parameters defined in the execution environment. At this stage, the scope chain is initialized, and the value of this is finally determined. In the execution phase, the code is interpreted and executed.

Demo:

<script type= "Text/javascript" >
  function Fn1 () {
    function Fn2 () {
      alert (document.body.tagName);/ Body
      //other code ...
    }
    Fn2 ();
  }
  Fn1 ();
  code here
</script>

Summary

When JavaScript code is loaded by the browser, the default first entry is a global execution environment. When a function is invoked in a global execution environment, the program flow enters the called function, at which point the JS engine creates a new execution environment for the function and presses it onto the top of the execution environment stack. The browser always executes the current execution environment at the top of the stack, and once executed, the execution environment is ejected from the top of the stack, and then the execution environment executes the code under it. In this way, the execution environment on the stack is executed sequentially and the stack pops up until it returns to the global execution environment.

In addition, there are a few points to note:

Single Thread

Synchronous execution

The only global execution environment

There is no limit to the number of local execution environments

Each time a function is invoked, a new local execution environment is created for it, even if it is a function that is called multiple times, and many different local execution environments are created.

Scope

When code executes in an environment, a scope chain (scope chain) is created for the variable object. The purpose of a scope chain is to ensure orderly access to all variables and functions that have access to the execution environment.

The scope chain contains variable objects that correspond to each execution environment in the execution environment stack. Through the scope chain, you can determine the access of variables and the resolution of identifiers.

Note: The variable object of the global execution environment is always the last object in the scope chain.

When you access a variable, you must have a problem with visibility (the inner environment can access variables and functions in the outer layer, and the outer environment cannot access the internal variables and functions). In a more profound sense, when accessing a variable or calling a function, the JavaScript engine constructs a list of variable objects in different execution environments according to the rules and, when accessing a variable, looks up on the first variable object in the list, and continues to look up the second variable object if it is not found. Until the variable object that is searched to the global execution environment is the window object. This also forms the concept of scope chain.

The scope chain diagram clearly expresses the relationship between the execution environment and the scope (one by one corresponding relationship), the relationship between scope and scope (list structure, from top to bottom).

Demo:

var color = "Blue";
function ChangeColor () {
 var anothercolor = "Red";
 function Swapcolors () {
  var tempcolor = Anothercolor;
  Anothercolor = color;
  color = Tempcolor;
  Here you can access color, Anothercolor, and Tempcolor
 }
 ///Here you can access color and anothercolor, but you cannot access Tempcolor
 swapcolors ();
}
ChangeColor ();
Only color
console.log ("Color is now" + color) can be accessed here;

The above code includes three execution environments: the global execution environment, the local execution Environment of ChangeColor (), and the local execution Environment of Swapcolors ().

The global environment has a variable color and a function changecolor ();

The local environment of the ChangeColor () function has a Anothercolor property and a swapcolors function, and of course, the ChangeColor function can access the variables in itself and its periphery (that is, the global environment);

The Swapcolor () function has a variable tempcolor in its local environment. Within the function, you can access all the variables in the above two environments (ChangeColor and Windows), because both environments are its parent execution environment.

The scope chain of the above code is shown in the following illustration:

Found from the above figure. 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.

Identifier resolution (a variable name or function name search) is the process of searching for identifiers at the first level along the scope chain. The search process always starts at the front end of the scope chain and then goes back and forth (the Global Execution Environment) backwards until the identifier is found.

The difference and relation between execution environment and scope

The execution environment is a global execution environment and a local execution environment, which is created during function execution.

A scope chain is a variable object based on the execution environment, which is the active object for the function, because the variable object is not directly accessible in the function execution environment, at which point the active object (Activation object, abbreviated to AO) plays VO (variable objects) 's role. ) are composed together.

When code executes in an environment, a scope chain of variable objects is created. The purpose of a scope chain is to ensure an orderly access to all variables and functions that are granted access to the execution environment. The front end of the scope chain is always the variable object of the environment in which the currently executing code resides.

Small exercise

<script type= "Text/javascript" >
(Function () {
  a= 5;
  Console.log (WINDOW.A);//undefined
  var a = 1;//Here the variable declaration elevation
  console.log (a);//1
}) ();
</script>

WINDOW.A is undefined because var a = 1; A variable declaration elevation occurred. Corresponds to the following code:

<script type= "Text/javascript" >
(Function () {
  var a;//a is local variable
  a = 5;//There is a in the local environment, it will not be found in the
  global Console.log (WINDOW.A);//undefined
  a = 1;//here a variable declaration elevation
  console.log (a);//1
}) ();
</script>

The above is small series for everyone to bring the cliché of the original JS implementation environment and scope of the entire content, I hope that we support cloud Habitat Community ~