了解 JavaScript 中的提升-js教程-PHP中文网

了解 JavaScript 中的提升

WBOY

发布： 2024-07-27 07:02:02

原创

468 人浏览过

Understanding Hoisting in JavaScript

提升是 JavaScript 中经常让新开发人员感到困惑的基本概念之一。然而，一旦理解，它对编写和调试 JavaScript 代码会有很大帮助。在本文中，我们将揭开提升的神秘面纱，解释其工作原理，并提供示例来说明其效果。

什么是吊装？

在 JavaScript 中，提升是在编译阶段将变量和函数声明移动或“提升”到其包含范围（全局范围或函数范围）顶部的行为。这意味着您可以在代码中实际声明变量和函数之前使用它们。

提升变量

让我们从变量提升开始。考虑以下代码：

console.log(myVar); // Output: undefined
var myVar = 10;
console.log(myVar); // Output: 10

登录后复制

尽管在声明之前使用了 myVar 变量，但没有发生错误。相反，未定义会记录到控制台。发生这种情况是因为 myVar 的声明被提升到其作用域的顶部，但其赋值仍然存在。上面的代码解释为：

var myVar;
console.log(myVar); // Output: undefined
myVar = 10;
console.log(myVar); // Output: 10

登录后复制

起重功能

函数声明也被提升。考虑这个例子：

greet(); // Output: Hello!

function greet() {
  console.log('Hello!');
}

登录后复制

greet 函数在声明之前被调用，但它工作正常。这是因为函数声明被提升到其作用域的顶部。代码解释为：

function greet() {
  console.log('Hello!');
}

greet(); // Output: Hello!

登录后复制

Let 和 Const 声明

随着 ES6 的引入，let 和 const 关键字提供了块作用域变量，它们的提升方式与 var 不同。然而，它们的声明仍然被提升，但从块的开始直到遇到声明，它们仍然处于“临时死区”（TDZ）中。在声明之前访问它们会导致引用错误。

console.log(myLetVar); // ReferenceError: Cannot access 'myLetVar' before initialization
let myLetVar = 20;

console.log(myConstVar); // ReferenceError: Cannot access 'myConstVar' before initialization
const myConstVar = 30;

登录后复制

实际例子

示例 1：使用 var 进行变量提升

function hoistExample() {
  console.log(message); // Output: undefined
  var message = 'Hoisting in JavaScript';
  console.log(message); // Output: Hoisting in JavaScript
}

hoistExample();

登录后复制

示例 2：函数提升

hoistedFunction(); // Output: This function is hoisted!

function hoistedFunction() {
  console.log('This function is hoisted!');
}

登录后复制

示例 3：使用 let 和 const 的临时死区

function tdzExample() {
  console.log(tempVar); // ReferenceError: Cannot access 'tempVar' before initialization
  let tempVar = 'Temporal Dead Zone';
}

tdzExample();

登录后复制