看透变量提升与块级作用域的实现原理

这几节课程中我们讲到了变量提升，但是你有没有想过 JavaScript 是如何实现变量提升的，ES6 中又是如何通过 let、const 实现块级作用域的，这节内容揭晓答案。

在上节课程执行上下文与调用栈我们学习了执行上下文。在 JavaScript 主要有两种情况会创建执行上下文（其实还有一种，暂且不讲），一种是全局 JavaScript 代码，另一种是函数。而「变量提升」和「块级作用域」主要依托于执行上下文。

分析一段代码，代码中有使用 var 和 let 申明的变量：

function look() {
    var name = '素燕';
    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();

1. 创建全局执行上下文并压入调用栈，全局只定义了一个函数 look；

2.创建函数 look 的执行上下文；

第一步：

把通过 var 申明的变量加入到变量环境中，并初始化为 undefined。使用 var 声明的变量有 name、from、canGo、addd。把 let 声明的变量加入到词法环境中，let 申明的变量属于块级作用域，此时在当前块中只有 age。在词法环境中，利用栈来管理不同的块级作用域，当有新的块级作用域时会入栈，块级作用域中的代码执行完后会进行出栈操作。