JavaScript中hoisting是什么

JavaScript中hoisting是什么

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

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) letconst 声明的变量

  • 提升行为:声明会被提升,但不会初始化(进入"暂时性死区")。
  • 初始值 :在声明前访问会抛出 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:提升到函数作用域顶部。
  • letconst:提升到块级作用域顶部。

示例

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 允许重复声明,后声明的变量会覆盖前者。
  • letconst 不允许重复声明,会报错。

示例

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) 优先使用 letconst

  • letconst 提供了块级作用域,避免了 var 的变量提升问题。

总结

声明方式 提升行为 初始值 作用域
var 声明提升,赋值不提升 undefined 函数作用域
let 声明提升,但进入暂时性死区 不可访问 块级作用域
const 声明提升,但进入暂时性死区 不可访问 块级作用域
函数声明 整个函数(包括函数体)提升 函数体 函数作用域
函数表达式 仅变量声明提升,函数体不提升 undefined 函数作用域

理解变量提升有助于编写更健壮、可维护的 JavaScript 代码。

更多vue相关插件及后台管理模板可访问vue admin reference,代码详情请访问github

相关推荐
Danny_FD2 分钟前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟2 分钟前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
安思派Anspire3 分钟前
LangGraph + MCP + Ollama:构建强大代理 AI 的关键(一)
前端·深度学习·架构
LRH3 分钟前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
Jolyne_4 分钟前
可配置永久生效的Table组件的封装过程
前端·react.js
自由逐风4 分钟前
前端小数点精度问题解析
javascript
断竿散人4 分钟前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise
laperter5 分钟前
js中继承关系杂乱?这篇带你理清
javascript
肖魏眸6 分钟前
vue3 格式化 : antfu 组合 prettier & eslint & 提交格式化校验
前端·代码规范
婉婉耶7 分钟前
VUE带你乘风破浪~
前端·vue.js