JavaScript中hoisting是什么
Hoisting（变量提升） 是 JavaScript 中的一种行为，指的是变量和函数的声明在代码执行前被提升到其作用域的顶部。这意味着可以在声明之前使用变量或调用函数，但实际行为因变量类型（var、let、const）和函数类型（函数声明、函数表达式）而异。
1. 变量提升
(1) var 声明的变量
- 提升行为：声明会被提升到作用域顶部，但赋值不会。
- 初始值：提升后的变量值为
undefined。
示例：
console.log(x); // 输出：undefined
var x = 10;
console.log(x); // 输出：10
实际执行顺序：
var x; // 声明提升
console.log(x); // 输出：undefined
x = 10; // 赋值
console.log(x); // 输出：10
(2) let 和 const 声明的变量
- 提升行为：声明会被提升，但不会初始化（进入“暂时性死区”）。
- 初始值：在声明前访问会抛出
ReferenceError。
示例：
console.log(y); // 报错：ReferenceError: Cannot access 'y' before initialization
let y = 20;
console.log(y); // 输出：20
实际执行顺序：
let y; // 声明提升，但未初始化
console.log(y); // 报错：暂时性死区
y = 20; // 赋值
console.log(y); // 输出：20
2. 函数提升
(1) 函数声明
- 提升行为：整个函数声明（包括函数体）会被提升到作用域顶部。
- 行为：可以在声明前调用。
示例：
foo(); // 输出：Hello
function foo() {
console.log('Hello');
}
实际执行顺序：
function foo() {
console.log('Hello');
}
foo(); // 输出：Hello
(2) 函数表达式
- 提升行为：只有变量声明会被提升，函数赋值不会被提升。
- 行为：在赋值前调用会报错。
示例：
bar(); // 报错：TypeError: bar is not a function
var bar = function() {
console.log('World');
};
实际执行顺序：
var bar; // 声明提升
bar(); // 报错：bar 是 undefined
bar = function() {
console.log('World');
};
3. 变量提升的作用域
var：提升到函数作用域顶部。let和const：提升到块级作用域顶部。
示例：
function test() {
console.log(a); // 输出：undefined
if (true) {
var a = 10;
let b = 20;
}
console.log(a); // 输出：10
console.log(b); // 报错：ReferenceError: b is not defined
}
test();
4. 注意事项
(1) 避免使用未声明的变量：未声明的变量不会提升，直接使用会报错。
console.log(z); // 报错：ReferenceError: z is not defined
(2) 避免重复声明：
var允许重复声明，后声明的变量会覆盖前者。let和const不允许重复声明，会报错。
示例：
var x = 1;
var x = 2; // 允许
console.log(x); // 输出：2
let y = 1;
let y = 2; // 报错：SyntaxError: Identifier 'y' has already been declared
(3) 优先使用 let 和 const：
let和const提供了块级作用域，避免了var的变量提升问题。
总结
| 声明方式 | 提升行为 | 初始值 | 作用域 |
|---|---|---|---|
var | 声明提升，赋值不提升 | undefined | 函数作用域 |
let | 声明提升，但进入暂时性死区 | 不可访问 | 块级作用域 |
const | 声明提升，但进入暂时性死区 | 不可访问 | 块级作用域 |
| 函数声明 | 整个函数（包括函数体）提升 | 函数体 | 函数作用域 |
| 函数表达式 | 仅变量声明提升，函数体不提升 | undefined | 函数作用域 |
理解变量提升有助于编写更健壮、可维护的 JavaScript 代码。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
