js变量提升顺序

在JavaScript中，变量提升（Hoisting）是指在代码执行之前，JavaScript引擎会将变量和函数声明移动到其所在作用域的顶部。这意味着你可以在声明之前使用变量或函数，尽管这通常会导致一些意想不到的结果。

基础概念

1. 变量提升：JavaScript引擎在执行代码之前，会将所有的变量声明和函数声明提升到当前作用域的顶部。
2. 暂时性死区（Temporal Dead Zone, TDZ）：在使用let和const声明变量时，变量在声明之前是不可访问的，即使在同一作用域内。

优势

变量提升的主要“优势”是它允许开发者在代码中的任何位置声明变量和函数，尽管这可能会导致代码难以理解和维护。

类型

• 变量提升：包括var声明的变量。
• 函数提升：包括函数声明和函数表达式（但函数表达式的变量部分也会受到变量提升的影响）。

应用场景

变量提升通常不是一个需要主动应用的特性，而是需要开发者理解和避免的潜在问题。

常见问题及原因

1. 意外访问未初始化的变量：
2. 意外访问未初始化的变量：
3. 这是因为var a被提升到了作用域顶部，但是赋值操作a = 10没有被提升。
4. 函数表达式和函数声明的区别：
5. 函数表达式和函数声明的区别：
6. 这里foo是一个函数表达式，变量foo被提升，但是函数本身没有被提升。
7. 暂时性死区：
8. 暂时性死区：
9. 使用let和const声明的变量在声明之前是不可访问的。

解决方法

1. 始终在使用变量之前声明它们：
2. 始终在使用变量之前声明它们：
3. 使用let和const代替var： let和const声明的变量不会被提升到作用域顶部，并且有暂时性死区的保护。
4. 使用let和const代替var： let和const声明的变量不会被提升到作用域顶部，并且有暂时性死区的保护。
5. 函数声明优先： 如果需要在代码顶部使用函数，可以使用函数声明而不是函数表达式。
6. 函数声明优先： 如果需要在代码顶部使用函数，可以使用函数声明而不是函数表达式。

示例代码

// 变量提升示例
console.log(a); // undefined
var a = 10;

// 函数提升示例
foo(); // "hello"
function foo() {
    console.log('hello');
}

// 函数表达式示例
console.log(bar); // undefined
var bar = function() {
    console.log('world');
};

// 暂时性死区示例
console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

通过理解和避免变量提升带来的问题，可以编写出更清晰、更可维护的代码。