250410-var变量提升

执行下列代码，输出结果为（）

var val = 12;
function fun1(){
    console. log(val);
    var val = 20;
    console.log(val);
}
fun1();

A. 12 20
B. 12 12
C. undefined 20
D. 20 undefined

答案

题源

[!note]
链接：https://www.nowcoder.com/questionTerminal/9433a94e86904e1faddd39a81c9e300b?
来源：牛客网
这道题目考察了JavaScript中变量声明提升(hoisting)和作用域的概念。

函数fun1中使用var声明了局部变量val。由于变量提升机制,var声明会被提升到函数作用域顶部,但赋值语句保持在原位置。所以代码等价于:

function fun1(){
var val; // 声明提升到顶部,初始值为undefined
console.log(val); // 输出undefined
val = 20; // 赋值语句位置不变
console.log(val); // 输出20
}

这就解释了为什么第一个console.log输出undefined,第二个输出20。

分析其他选项:
A错误:第一个输出不是12,因为函数内的var val声明被提升,覆盖了外部的val
B错误:同A,第一个输出是undefined而不是12
D错误:第二个输出是20而不是undefined,因为在第二次输出前val已被赋值为20

这道题很好地体现了JavaScript变量声明提升的特性,以及函数作用域中局部变量对外部同名变量的遮蔽效果。

错因

对var的变量声明提升不了解，了解不深