js变量提升：从零到一深刻理解！

执行上下文，我们也可以称之为执行环境，它是解释器遇到可执行代码时进入的一种状态，它代表了当前代码的执行环境。在 js 中，变量提升是一个备受关注和困惑的话题，而要理解它，我们必须首先从执行上下文入手。

当我们运行一段 js 代码时，实际上就是在创建和销毁一个个执行上下文，每个执行上下文都具有自己独立的作用域。在解释器执行代码时，它会首先进入全局执行上下文，然后依次进入嵌套的执行上下文，如函数执行上下文、块级作用域执行上下文等。

1. 执行上下文与变量提升

在 js 中，变量提升是一个非常有趣的话题，它并不是在执行代码时才发生，而是在创建执行上下文时就已经发生了。这意味着，当解释器遇到一个执行上下文时，它会首先将该执行上下文中的所有变量提升到当前执行上下文的顶端。

例如，我们有一个如下代码：

function test() {
  var a = 10;
  console.log(a);
  var b = 20;
  console.log(b);
}

test();

在这个代码中，我们在函数 test() 中定义了两个变量 a 和 b。根据变量提升的规则，当执行上下文创建时，这两个变量都会被提升到函数 test() 的顶端。因此，即使我们在实际执行代码时，变量 a 和 b 是在不同的位置定义的，但它们都会被提升到函数 test() 的顶端，并且在执行代码时，变量 a 和 b 都可以被访问到。

2. 声明变量与变量提升

在 js 中，我们有两种声明变量的方式：var 声明和 let/const 声明。var 声明是传统的声明方式，而 let/const 声明是 es6 中引入的新声明方式。

var 声明会将变量提升到当前执行上下文的顶端，而 let/const 声明则不会。这意味着，当我们使用 var 声明变量时，该变量可以在执行代码前访问到，而使用 let/const 声明变量时，该变量只能在执行代码后才能访问到。

例如，我们有一个如下代码：

function test() {
  console.log(a);
  var a = 10;
  console.log(a);
}

test();

在这个代码中，我们在函数 test() 中使用了 var 声明变量 a。根据变量提升的规则，变量 a 会被提升到函数 test() 的顶端，因此，即使我们在实际执行代码时，变量 a 是在函数 test() 的第二行代码中定义的，但它可以在函数 test() 的第一行代码中访问到。

function test() {
  console.log(a);
  let a = 10;
  console.log(a);
}

test();

在这个代码中，我们在函数 test() 中使用了 let 声明变量 a。根据变量提升的规则，变量 a 不会被提升到函数 test() 的顶端，因此，变量 a 只能在函数 test() 的第二行代码中访问到，而在函数 test() 的第一行代码中，变量 a 是不可访问的。

3. 变量提升的注意事项

在 js 中，变量提升是一个需要注意的问题，特别是当我们使用 var 声明变量时，一定要注意变量提升的规则，避免在代码执行前访问未定义的变量。

如果我们希望避免变量提升，我们可以使用 let/const 声明变量。let/const 声明变量不会发生变量提升，因此，变量只能在执行代码后才能访问到。

4. 总结

变量提升是 js 中的一个重要概念，它可以帮助我们更灵活地编写代码。但是，我们也需要注意变量提升的规则，避免在代码执行前访问未定义的变量。