JavaScript变态面试题解析 - 揭秘变量提升的奇异运行机制

2023-11-12 02:17:56

JavaScript 作为一门灵活且强大的编程语言，因其独树一帜的变量提升机制而闻名。变量提升是JavaScript中一个非常有趣且令人迷惑的概念，很多时候，它会让你抓耳挠腮，百思不得其解。为了帮助大家更好地理解这个概念，我们将深入剖析两道变态的JavaScript面试题，揭示变量提升在运行中的奇异机制。

变态面试题

console.log(a); // undefined
var a = 10;

运行结果：

undefined

谜题解答

在JavaScript中，变量声明会自动提升到函数或块的顶部。也就是说，在执行任何代码之前，所有变量都会被声明并初始化为 undefined。因此，在上面的代码中，变量 a 在执行 console.log(a) 语句之前就已经被声明，但尚未赋值，所以输出结果为 undefined。

变态面试题

function foo() {
  console.log(a); // undefined
  var a = 10;
}

foo(); // undefined

运行结果：

undefined

谜题解答

乍一看，这个代码似乎与上一个代码没有什么区别。然而，这里却隐藏了一个陷阱。在JavaScript中，函数内部存在一个私有的块级上下文。这意味着，在函数执行时，会创建一个新的变量环境，而这个环境与函数外部的环境是隔离的。因此，在上面的代码中，当 foo() 函数被调用时，会在函数内部创建一个新的变量环境，变量 a 在这个环境中被声明并初始化为 undefined。而当 console.log(a) 语句被执行时，它会在函数内部的环境中查找变量 a，但由于 a 还未被赋值，所以输出结果为 undefined。