变量提升逐个解析，重新认识JavaScript的运行机制

前言，知识回顾

上一章学习了变量提升的原理，先来回顾一下什么是变量提升。

变量提升就是javascript代码执行时，会在最开始阶段把变量声明提升到函数或者全局作用域的顶部，同时把变量的值初始化为undefined。

变量提升的主要特点：

• 作用于变量声明，不作用于变量赋值。
• 变量提升只发生在声明阶段，而不会发生在赋值阶段。
• 变量提升只会作用于var声明的变量，不会作用于let和const声明的变量。
• 变量提升会使得变量在声明之前就可以访问，但是访问的值是undefined。

javascript提升变量, 是把变量的声明, 移动到脚本或者函数的顶部. 当我们访问变量的时候, 不管我们变量定义的位置在哪, 都先从顶部开始找.

比如这段代码:

a = 5;
var b;
b = 10;
console.log(a); // 5
console.log(b); // 10

这段代码的运行结果是5和10。这是因为在执行代码之前，javascript会先把变量a和b提升到全局作用域的顶部，然后把a的值初始化为undefined，把b的值初始化为undefined。

作用域提升

作用域提升是变量提升的一种特殊情况，它指的是变量提升只发生在作用域的顶部。

function test() {
  a = 5;
  var b;
  b = 10;
}

console.log(a); // undefined
console.log(b); // ReferenceError: b is not defined

这段代码的运行结果是undefined和ReferenceError: b is not defined。这是因为变量a和b提升到了test函数的作用域的顶部，但是a没有被赋值，所以a的值是undefined。而b没有被声明，所以访问b会抛出ReferenceError: b is not defined。

temporal dead zone

temporal dead zone（暂时性死区）是指变量在声明之前的一段时间内，它是不可访问的。

console.log(a); // ReferenceError: a is not defined
var a = 5;

这段代码的运行结果是ReferenceError: a is not defined。这是因为变量a在声明之前是不可访问的。

变量声明提升

变量声明提升是指变量的声明被提升到函数或者全局作用域的顶部。

a = 5;
function test() {
  a = 10;
  var b = 10;
}

console.log(a); // 5
console.log(b); // ReferenceError: b is not defined

这段代码的运行结果是5和ReferenceError: b is not defined。这是因为变量a和b都被提升到了全局作用域的顶部，但是b没有被赋值，所以访问b会抛出ReferenceError: b is not defined。

函数提升

函数提升是指函数的声明被提升到函数或者全局作用域的顶部。

function test() {
  a = 10;
  b = 10;
}

test();

console.log(a); // 10
console.log(b); // ReferenceError: b is not defined

这段代码的运行结果是10和ReferenceError: b is not defined。这是因为函数test被提升到了全局作用域的顶部，但是变量b没有被声明，所以访问b会抛出ReferenceError: b is not defined。

如何避免变量提升带来的问题

为了避免变量提升带来的问题，我们可以使用let和const来声明变量。

let a = 5;
const b = 10;

console.log(a); // 5
console.log(b); // 10

这段代码的运行结果是5和10。这是因为let和const声明的变量不会发生变量提升，所以变量a和b只能在声明之后访问。

总结

变量提升是一个容易让人困惑的概念，但是只要掌握了变量提升的原理，作用域提升、temporal dead zone、变量声明提升、函数提升等概念，以及如何避免变量提升带来的问题，就可以轻松驾驭变量提升。