Execution environment and scope in js

I was asked about the understanding of the scope chain in the interview recently. I felt that the answer was not very good at that time. Today, let’s talk about the scope chain in js.

First of all, let's talk about the execution environment in js. The so-called execution environment (sometimes also called environment ) is the most important concept in JavaScript. The execution environment defines the other data that a variable or function has access to, which determines their respective behavior. Each execution environment has a variable object associated with it , and all variables and functions defined in the environment are stored in this object.

Now that you understand the execution environment, let's look at what a scope chain is. Each function has its own execution environment, and when code is executed in the execution environment, a scope chain of variable objects is created . The scope chain guarantees ordered access to all variables and functions that have access to the execution environment. The front end of the scope chain is always the variable object of the environment where the currently executed code is located. If the environment is a function, then its variable object is the active object of the function. The next variable object in the scope chain comes from the containing (outer) environment, and the next variable object comes from the next containing environment. This continues to the global execution environment, remember that the variable object of the global execution environment is always the last object in the scope.

See the example below:

var scope="global";
function foo(){
    console.log(scope);
}    
foo();

In this example, the scope chain of the function foo() contains two objects, one for itself and one for variables in the global environment. Since we can find the scope in this scope chain, we can access it inside the function.

Looking at an example:

var color = "blue";
function changeColor(){
    var anoterColor = "red";
    function swapColor(){
        var tempColor = anoterColor;
        anoterColor = color;
        color = tempColor;
        console.log(color);
    }
    swapColor();
}
changeColor();

In this example, there are three execution contexts: the global context, the changeColor() local context, and the swapColor() local context. Let's see what the scope chain for this example looks like.

The rectangles in the diagram represent specific execution environments. We can see that the variable tempColor can only be accessed in the context of swapColor(), but not in the local or global context of changeColor(). Therefore, we can draw a conclusion: the inner environment can access all the outer environments through the scope chain, but the outer environment cannot access any variables and functions in the inner environment. Each environment can search up the scope chain for variable and function names; but no environment can search down the scope to enter another execution environment.

What I also want to say about the scope is: js does not have block-level scope

Why does js have no block-level scope? Let's look at the following code:

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

Hey, why is color destroyed after the if statement is executed? Haha, if in C, C++ or Java, color does get destroyed, but in JavaScript, a variable declaration in an if statement adds the variable to the current execution environment (in this case, the global environment). In particular, keep this difference in mind when using for statements, such as:

for(var i = 0;ｉ< 10; i++){
doSomething(i);
}
alert(i);       //10

Remember: in JavaScript, the variable i created by the for statement will still exist in the execution environment outside the loop even after the for loop execution ends.