像老司机一样玩转JS变量提升，助你成为面试官眼中的宠儿

2023-12-20 08:32:44

前言：变量提升的舞台——执行上下文

在讨论变量提升之前，我们先来了解一下它的舞台——执行上下文。在JavaScript中，执行上下文是一个包含当前执行代码的环境。它负责管理变量、函数和作用域。当代码执行时，它会创建一个执行上下文，并在其中执行代码。当代码执行完毕后，执行上下文就会被销毁。

变量提升：幕后黑手的揭秘

变量提升是指在JavaScript中，变量和函数在声明之前就可以使用。这是因为在JavaScript的执行过程中，会先将变量和函数提升到当前执行上下文的顶部。这种提升行为被称为变量提升。

变量提升有两种类型：

声明提升：将变量声明提升到当前执行上下文的顶部，但不会初始化变量的值。
定义提升：将变量声明和初始化提升到当前执行上下文的顶部。

两道“变态”面试题，直击变量提升的本质

问题一：函数声明和变量声明的提升区别

function foo() {
  console.log("foo");
}

var bar = 1;

foo(); // "foo"
console.log(bar); // undefined

在上面的代码中，foo函数和bar变量都被提升到了全局作用域的顶部。但是，foo函数被声明和定义，而bar变量只被声明。因此，当调用foo函数时，它可以正常执行。但是，当访问bar变量时，它还是undefined，因为它的值还没有被初始化。

问题二：块级作用域中的变量提升

if (true) {
  var foo = 1;
  let bar = 2;
}

console.log(foo); // 1
console.log(bar); // ReferenceError: bar is not defined

在上面的代码中，foo变量和bar变量都被提升到了块级作用域的顶部。但是，foo变量是使用var声明的，而bar变量是使用let关键字声明的。var关键字声明的变量是全局变量，而let关键字声明的变量是块级作用域变量。因此，当访问foo变量时，它可以正常访问。但是，当访问bar变量时，它会抛出ReferenceError错误，因为bar变量只在块级作用域内有效。