See how variable promotion and block-level scope are implemented

Answer yesterday’s question in 2000 words
Var, let, const for midterm exam
Var is silly, let is sweet, const is firm

We’ve covered variable promotion in these lessons, but have you ever wondered how JavaScript implements variable promotion, or how ES6 implements block-level scope via lets and const?

In the last execution Context and call stack lesson, we learned about execution context. There are two main ways to create execution contexts in JavaScript (there is one, but I won’t talk about it for a moment) : global JavaScript code and functions. “Variable promotion” and “block-level scope” depend on the execution context.

Analyze a piece of code with variables declared using var and let:

function look() {
    var name = 'plain yan';
    let age = 19;
    if (age > 18) {
        let money = 0;
        var from = 'home';
        if(money <= 0) {
            money += 10;
            let isNeedMore = money <= 10;
            if (isNeedMore) {
                money += 10;
                let isEnd = money > 10;
                var canGo = isEnd;
            }
            isNeedMore = false;
        }
        money = 0;
    } else {
        let needAge = 18 - age;
        var add = age + needAge;
    }
}
look();
Copy the code

1. Create a global execution context and push it onto the call stack.

2. Create the execution context of the function look;

The first step:

Add a variable declared by var to the variable environment and initialize it as undefined. Variables declared using var include name, FROM, canGo, and addd. Add the variable declared by the let to the lexical environment. The variable declared by the let belongs to the block-level scope, and there is only age in the current block. In a lexical environment, stacks are used to manage different block-level scopes, which are pushed when new block-level scopes are available, and the code in the block-level scopes is removed from the stack after execution.

At this point, the call stack is:

The second step:

When sentence 5 is executed, a new block appears. Create a new block. Only one variable, money, is added to the lexical environment. It is important to note that block-scoped variables are added to the lexical environment only when the code block is to be executed. Blocks are independent of each other, and blocks in the same execution context are managed through stacks.

The third step

At sentence 8, another block is encountered, and a variable isNeedMore is added to the lexical environment.

The fourth step

Step 5

Step 6

Blocks in a block-level scope are stacked in turn. When the look function completes, the look execution context is pushed out of the call stack. The final call stack is left with the global execution context.

conclusion

Execution context, this paper analyzes the variables increase with the implementation of the block-level scope, variables of ascension is actually in the var statement compilation phase variables into the environment, and the realization of the block-level scope is through the different blocks to save block variables, use the let, const declaration by stack mechanism to deal with different block. The execution context is very important for understanding this closure. Come on, everybody.