请问这段涉及闭包的JS代码变量行为如何，为何输出undefined？

问题现象解释 #

这个输出undefined的情况本质不属于闭包问题，是JavaScript的变量提升（Hoisting） 机制导致的。

你给出的代码如下：

var x = 21; 
var test = function () { 
    console.log(x); // output: undefined 
    var x = 20; 
}; 
test();

具体执行逻辑： #

• JavaScript在执行任意作用域的代码前，会先扫描当前作用域内所有用var声明的变量，将变量的声明操作提升到当前作用域的最顶部，赋值操作仍然留在原本的代码位置执行，未赋值的变量默认值为undefined
• 调用test()函数时，首先扫描函数内部的代码，识别到var x = 20的声明，会先在函数作用域顶部隐式声明变量x，此时x的取值为undefined
• 执行console.log(x)时，当前函数作用域内已经存在同名的x变量，不会向上查找全局作用域的x=21，而此时x还没有执行到赋值为20的步骤，所以输出结果为undefined

上述test函数的实际执行逻辑等价于以下写法：

var test = function () {
    var x; // 声明被隐式提升到作用域顶部，默认值undefined
    console.log(x); // 输出undefined
    x = 20; // 赋值操作留在原位置执行
};

扩展说明 #

如果要在console.log位置读取到全局的21，有两种常用方案：

• 删除函数内部的var x = 20声明，此时会向上查找到全局作用域的x
• 显式指定读取全局作用域的x：console.log(window.x)

内容的提问来源于stack exchange，提问作者Mridul