JavaScript中hoisting是什么

Hoisting（变量提升） 是 JavaScript 中的一种行为，指的是变量和函数的声明在代码执行前被提升到其作用域的顶部。这意味着可以在声明之前使用变量或调用函数，但实际行为因变量类型（var、let、const）和函数类型（函数声明、函数表达式）而异。

1. 变量提升

(1) var 声明的变量

提升行为：声明会被提升到作用域顶部，但赋值不会。
初始值 ：提升后的变量值为 undefined。

示例：

javascript 复制代码

console.log(x); // 输出：undefined
var x = 10;
console.log(x); // 输出：10

实际执行顺序：

javascript 复制代码

var x; // 声明提升
console.log(x); // 输出：undefined
x = 10; // 赋值
console.log(x); // 输出：10

(2) let 和 const 声明的变量

提升行为：声明会被提升，但不会初始化（进入"暂时性死区"）。
初始值 ：在声明前访问会抛出 ReferenceError。

示例：

javascript 复制代码

console.log(y); // 报错：ReferenceError: Cannot access 'y' before initialization
let y = 20;
console.log(y); // 输出：20

实际执行顺序：

javascript 复制代码

let y; // 声明提升，但未初始化
console.log(y); // 报错：暂时性死区
y = 20; // 赋值
console.log(y); // 输出：20

2. 函数提升

(1) 函数声明

提升行为：整个函数声明（包括函数体）会被提升到作用域顶部。
行为：可以在声明前调用。

示例：

javascript 复制代码

foo(); // 输出：Hello
function foo() {
  console.log('Hello');
}

实际执行顺序：

javascript 复制代码

function foo() {
  console.log('Hello');
}
foo(); // 输出：Hello

(2) 函数表达式

提升行为：只有变量声明会被提升，函数赋值不会被提升。
行为：在赋值前调用会报错。

示例：

javascript 复制代码

bar(); // 报错：TypeError: bar is not a function
var bar = function() {
  console.log('World');
};

实际执行顺序：

javascript 复制代码

var bar; // 声明提升
bar(); // 报错：bar 是 undefined
bar = function() {
  console.log('World');
};

3. 变量提升的作用域

var：提升到函数作用域顶部。
let 和 const：提升到块级作用域顶部。

示例：

javascript 复制代码

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) 避免使用未声明的变量：未声明的变量不会提升，直接使用会报错。

javascript 复制代码

console.log(z); // 报错：ReferenceError: z is not defined

(2) 避免重复声明：

var 允许重复声明，后声明的变量会覆盖前者。
let 和 const 不允许重复声明，会报错。

示例：

javascript 复制代码

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