javascript-Execution Environment

JavaScript's execution environment defines variables and functions that have access to other data and modify their values. Each execution environment has a variable object that defines all the variables and functions in the environment. The global execution environment is our outermost execution environment, and in a Web browser, this global execution environment is our window object. Each function has its own execution environment, when the execution of the flow execution of a function, our JavaScript will be the current execution environment to promote the environment stack, the execution of the code will be ejected from the environment stack, the control to the previous execution environment.

Let's say the scope chain. In fact, the scope chain defines all the variables and functions that we have access to in our execution environment. As we said earlier, we have an environment stack, the next variable object of the Variables object in the front of the environment stack comes from the containing environment, and so on. So the stack low variable object is the global execution environment.

The internal environment can access all the variables and functions of the external environment through the scope chain, but the external environment cannot access any variables and functions of the internal environment, which is also the principle of closures.

Identifier parsing is the process of searching identifiers first-level along the chain of scope, starting from the front end of the scope chain and backtracking backwards until it is found, and if not found, an error occurs.

We take a front-end machine of NetEase to try the topic to help understand this knowledge point:
Under the structure of the HTML below, write down click on one of the <li> tags current background color change red, compatriots color for white

<ulID= "Father">    <Li>I am the first</Li>    <Li>I am the second</Li>    <Li>I'm the third</Li>    <Li>I'm the four.</Li>    <Li>I'm the five.</Li></ul>

My JavaScript code:

//Execution Environment 1-window(function() {//Execution Environment -2    varFather = document.getElementById ("father");//Get ID    varSub = father.getelementsbytagname ("Li");//Get Li Collection    //The following is a self-executing notation     for(vari = 0,size = Sub.length; i < size; i++) {//bind a point-and-click event by traversing for each LI elementSub[i].onclick = (function(i) {//Execution Environment -3            return function() {//Execution Environment -4                 for(varj = 0; J < size; J + +) {Sub[j].style.backgroundcolor= "White"; } Sub[i].style.backgroundcolor= "Red";    }}) (i); }})();

I'm in the execution environment-4 of

Sub[j].style.backgroundcolor = "White";

This break point, we can see our execution environment in the Chrome Developer Debugging tool, when I click on the first LI element, we take a look at:

We see in the Chrome Developer tool that the variables in the current execution environment have J and this object, the this object points to the current clicked Li Element, the variables in the next execution environment of the current execution environment have I, and so on, Within the scope attribute we can see the variables and functions that we are able to invoke and modify under the current execution environment.

Speaking so much, perhaps we need a little practice to enhance our understanding of the implementation of the environment this knowledge point, to see some of the following examples:

1. For Loop case

varArr=[]; for(vari=0;i<3;i++) {Arr[i]=function(){        returni;    }; Log (arr[i]);//what's in store here? } for(vari=0;i<3;i++) {log (Arr[i] ());//What will it print? }log (arr[0] ());//? Log (Arr[1] ());//? Log (Arr[2] ());//? 

You can judge for yourself, but there are a lot of points to be aware of, oh ~, to see the right answer

varArr=[]; for(vari=0;i<3;i++) {Arr[i]=function(){        returni;    }; Log (arr[i]);//here the array is stored in a function} for(vari=0;i<3;i++) {log (Arr[i] ());//0,1,2}log (arr[0] ());//3Log (Arr[1] ());//3Log (Arr[2] ());//3

Have you guessed the result? Let us parse that the first log will output an array of functions, each of which returns the I value of the current execution environment, and in the second for loop, it is important to note that our I is repeatedly defined in the context of the global execution, and JavaScript will not tell you that it has been redefined. So our I is updated, that is, I value in the current execution environment will increment from 0 to 1 each time, the execution loop will print out 0,1,2, after the last loop, our I becomes 3, so at the end of printing I value, we will see the 3 output. Why does our I not start to define the function when the I value, that is, in the last execution of the function array when there is no output 0,1,2, this is because our scope chain mechanism to limit the closure can only get the last value of any variable in the function, which is also easy to understand, When we create a new function in the containing execution environment, that is, the new execution environment, we move the new execution environment forward stack, control to the new execution environment, so that the status of the execution environment can only be the last modified value.

To be able to output our expectations can be written like this:

var arr=[];  for (var i=0;i<3;i++) {    arr[i]= (function(num) {        return  num;    }) (i);}  for (var i=0;i<3;i++) {    log (arr[i]); // 0,1,2 }log (arr[0]); // 0log (arr[1]); // 1log (arr[2]); // 2

2. Self-executing function

Analyze what the following six pieces of code output separately

varName= "Ridge Xuan";(function(){    functionPerson () { This. Name= "Forest Language",         This. getname=function(){            return function(){                return  This. Name;    }        }            }; varfemale=NewPerson (); varMyname=Female.getname () (); Log (myName);//what will be exported here? })();

varName= "Ridge Xuan";(function(){    functionPerson () { This. Name= "Forest Language",         This. getname=function(){                return  This. Name;            }; }    varfemale=NewPerson (); varMyname=Female.getname (); Log (myName);//Output What})();

varName= "Ridge Xuan";(function(){    functionPerson () { This. Name= "Forest Language",         This. getname=function(){            return(function(that) {returnThat.name; })( This);            }; }    varfemale=NewPerson (); varMyname=Female.getname (); Log (myName);//Output What})();

varName= "Ridge Xuan";(function(){    functionPerson () { This. Name= "Forest Language",         This. getname=function(){            return function(){                return  This. Name; }.bind ( This);            }; }    varfemale=NewPerson (); varMyname=Female.getname () (); Log (myName);//Output What})();

varName= "Ridge Xuan";(function(){    functionPerson () { This. Name= "Forest Language",         This. getname=function(){            return function(){                return  This. Name; }.call ( This);            }; }    varfemale=NewPerson (); varMyname=Female.getname (); Log (myName);//Output What})();

varName= "Ridge Xuan";(function(){    functionPerson () { This. Name= "Forest Language",         This. getname=function(){            return function(){                return  This. Name; }.apply ( This);            }; }    varfemale=NewPerson (); varMyname=Female.getname (); Log (myName);//Output What})();

Well, our answer is that except for the first code output is "Ridge Xuan", the others are "forest language", the following four code shows us how to bind to the current object, the reader can explore their own experience.

javascript-Execution Environment