”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > JavaScript 中的提升

JavaScript 中的提升

发布于2024-11-06
浏览:112

Hoisting in JavaScript

什么是 JavaScript 提升?

提升是指 JavaScript 中在执行之前进行声明的过程。首先处理变量和函数声明。因此,即使变量在声明之前被引用,也不会导致错误,而是返回 undefined。对于函数声明,整个函数被提升,这意味着它可以在代码中定义之前使用。此过程在执行开始之前将声明放入堆栈中。

简单来说:

  • 用 var 声明的变量在提升期间被初始化为未定义。

  • 函数声明被完全提升,可以在写入代码之前调用。

  • 提升过程确保这些声明在执行堆栈中被识别,无论它们在代码中的位置如何。

需要注意的是,只有声明被提升,而不是赋值。作业保留在您编写作业的同一位置。

注意:那些说在提升过程中代码移到顶部的人实际上是错误的。代码永远不会向上移动。

例子:

console.log(myVariable); // undefined      
var myVariable = 10;

此代码同时执行两个操作。首先,它声明变量 myVariable 并将其提升到作用域,但其值仍然未定义。因此,console.log 命令将未初始化的值显示为未定义。之后,值 10 被分配给 myVariable.

但是,如果您尝试更改它,则不会对之前的声明产生任何影响。例如:

console.log(myVariable); // ReferenceError: myVariable is not defined      
myVariable = 10;

这里,我们还没有声明 myVariable 变量,因此它在尝试更改它之前会抛出 ReferenceError。

总之,JavaScript 首先读取所有代码,然后将所有声明提升到外部,同时将赋值保留在其原始位置。此过程称为提升。

var 和 let 也被提升:

var 和 let 在 JavaScript 中都是提升的,但它们的行为略有不同。

变量:

当你使用 var 声明一个变量时,它的声明被提升到作用域之外,你可以在声明之前访问该变量,但它的值将是未定义的,直到它被赋值为止。

例子:

console.log(myVariable); // undefined
var myVariable = 10;

在上面的代码中,声明 var myVariable 被提升到范围之外,但赋值 myVariable = 10 保留在原处。因此,console.log 语句输出 undefined,因为该变量存在但尚未赋值。

让:

另一方面,当您使用 let 声明变量时,提升行为有点不同。变量声明已提升,但您无法在声明之前访问该变量。这被称为“暂时死区”。如果您尝试在声明之前访问 let 变量,您将得到一个 ReferenceError。

例子:

console.log(myVariable); // ReferenceError: myVariable is not defined
let myVariable = 10;

在这种情况下,let 声明被提升,但在声明之前无法访问该变量。因此,console.logstatement 会抛出 ReferenceError,因为变量尚未定义。

这里基本上在let的情况下,即使吊起来,变量的值仍然是未定义的。因为内存中没有空间容纳该变量。因此无法引用该地址。因为内存中没有myVariable = 10的地址,所以给出引用错误。

常量:

const 关键字允许您创建常量,这些变量一旦赋值就无法重新赋值。

示例:1

const PI = 3.142;
PI = 22/7; // Attempt to reassign the value of PI
console.log(PI); // Output: TypeError: Assignment to constant variable

在这个例子中,我们将PI定义为一个常量,初始值为3.142。当我们尝试为 PI 重新分配新值时,会抛出 TypeError,因为常量无法重新分配。

示例:2

const PI;
console.log(PI); // Output: SyntaxError: Missing initializer in const declaration
PI = 3.142;

在这种情况下,我们声明一个常量 PI 而不对其进行初始化。此代码会引发 SyntaxError,因为必须同时声明和初始化常量。

示例:3

function getCircumference(radius) {
  console.log(circumference);
  circumference = PI * radius * 2;
  const PI = 22/7;
}
getCircumference(2); // ReferenceError: circumference is not defined

在这里,在 getCircumference 函数中,我们尝试在声明之前访问它的周长。它抛出一个 ReferenceError 因为变量尚未定义。

使用const时,需要在使用变量之前声明并初始化变量。

总体而言,var 和 let 都在 JavaScript 中被提升,但它们的行为和临时死区的概念仅适用于 let 变量。 const 创建一旦初始化就无法重新分配的常量。

所有未声明的变量都是全局变量:

function hoisted() {
a = 20;
var b = 100;
}
hoisted();
console.log(a); // 20
// can be accessed as a global variable outside the hoisted() function.

console.log(b);
// As it is declared, it is bound within the bounds of the hoisted() function. We cannot print it outside the hoisted() function.
output: ReferenceError: b is not defined

函数作用域变量

我们可以看到,函数hoist()作用域中的var消息变量的声明将到达函数的顶部。
为了避免这个问题,我们将确保在使用变量之前声明它。

在您提供的两个示例中,输出将是未定义的。

示例:1

function hoist() {
  console.log(message);
  var message = 'Hoisting is all the rage!';
}
hoist(); // Output: undefined

示例:2

function hoist() {
  var message;
  console.log(message);
  message = 'Hoisting is all the rage!';
}

hoist(); // Output: undefined

在这两种情况下,输出都是未定义的,因为变量被提升到各自作用域的顶部,但它们的赋值随后按照代码的原始顺序发生。

函数表达式

函数表达式不会提升,并抛出 TypeError,因为该表达式被视为变量而不是函数。

expression(); // Output: "TypeError: expression is not a function
var expression = function() {
  console.log('Will this work?');
};

严格模式

从其名称来看,它是 JavaScript 的受限制变体,不允许在声明变量之前使用变量。在严格模式下运行我们的代码:

  • 通过将一些静默的 JavaScript 错误更改为显式抛出错误来消除它们。

  • 修复了 JavaScript 引擎难以执行优化的错误。

  • 您可能会错过声明变量的机会,使用 strict 会抛出引用错误来阻止您。

'use strict';

console.log(hoist); // Output: ReferenceError: hoist is not defined
hoist = 'Hoisted';

结论

在声明变量和函数时了解 JavaScript 中的提升非常重要,随着对提升的解释,您将了解 JavaScript 代码的实际处理方式。

版本声明 本文转载于:https://dev.to/nozibul_islam_113b1d5334f/hoisting-in-javascript-i3p?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何在 Go 中跟踪 HTTP POST 请求的进度?
    如何在 Go 中跟踪 HTTP POST 请求的进度?
    Go 中跟踪 HTTP POST 请求的进度通过 POST 请求发送大文件和图像时,开发者经常面临跟踪上传进度的挑战。本问题探讨了一种可靠的方法来监控 Go 应用程序中此类请求的进度。该问题建议手动打开 TCP 连接并分块发送 HTTP 请求。但是,此方法可能会遇到 HTTPS 站点的限制,并且不被...
    编程 发布于2024-11-06
  • 如何在 Java 中获取文件夹中的文件名列表?
    如何在 Java 中获取文件夹中的文件名列表?
    使用 Java 获取文件夹中的文件名获取目录中文件名列表的任务是各种环境中的常见需求编程场景。要在 Java 中实现此目的,有一种简单的方法,即利用 File 类。代码方法:首先,使用所需的目录路径实例化 File 对象:File folder = new File("your/path&...
    编程 发布于2024-11-06
  • 角管:综合指南
    角管:综合指南
    Angular 中的 Pipes 是简单的函数,用于在不修改底层数据的情况下转换模板中的数据。管道接收一个值,对其进行处理,然后返回格式化或转换后的输出。它们通常用于格式化日期、数字、字符串,甚至数组或对象。 它们允许您直接在视图中以更具可读性或相关性的格式格式化和显示数据,而无需更改底层数据模型。...
    编程 发布于2024-11-06
  • Tailwind CSS 和深色模式
    Tailwind CSS 和深色模式
    在本文中,我们将探讨如何在 Tailwind CSS 中实现深色模式。深色模式已成为流行的设计趋势,因为它可以在低光环境下提供更好的用户体验并减轻眼睛疲劳。 Tailwind 可以通过其内置实用程序轻松支持暗模式。 1. Tailwind 中的深色模式如何工作 Tailwind 提供...
    编程 发布于2024-11-06
  • 如何使用 CakePHP 的 Find 方法执行 JOIN 查询?
    如何使用 CakePHP 的 Find 方法执行 JOIN 查询?
    CakePHP Find 方法与 JOINCakePHP find 方法提供了一种从数据库检索数据的强大方法,包括连接表。本文演示了使用 CakePHP 的 find 方法执行 JOIN 查询的两种方法。方法 1:利用模型关系此方法涉及定义模型之间的关系并使用可遏制的行为。考虑以下模型关系:clas...
    编程 发布于2024-11-06
  • 如何在 Python 中重用生成器而不重新计算或存储结果?
    如何在 Python 中重用生成器而不重新计算或存储结果?
    通过重置在 Python 中重用生成器在 Python 中,生成器是用于迭代元素序列的强大工具。但是,一旦迭代开始,生成器就无法倒回。如果您需要多次重用生成器,这可能会带来挑战。重用生成器的一个策略是再次重新运行生成器函数。这将从头开始重新启动生成过程。然而,如果生成器函数的计算成本很高,则这种方法...
    编程 发布于2024-11-06
  • 面向 JavaScript 开发人员的热门 S 代码扩展
    面向 JavaScript 开发人员的热门 S 代码扩展
    JavaScript 正在快速发展,围绕它的工具生态系统也在快速发展。 作为开发人员,您希望使您的工作流程尽可能高效和流畅。这就是 Visual Studio Code (VS Code) 的用武之地。 我精心挑选了 5 个 VS Code 扩展,它们将显着增强您的 JavaScript 开发体验。...
    编程 发布于2024-11-06
  • 如何使用 HTML 输出标签来显示计算结果。
    如何使用 HTML 输出标签来显示计算结果。
    欢迎回来!我希望每个人都度过愉快的周末。今天,让我们回到 HTML 标签并重点关注 标签。 标签是什么? 标签用于显示计算结果。它是一个内联元素,可以放置在 、 或其他内联元素内。它通常用于显示计算结果或实时显示变量值。 阅读完整文章,实时观看并获取代码。 ...
    编程 发布于2024-11-06
  • Java:理解变量、数据类型和输入/输出
    Java:理解变量、数据类型和输入/输出
    介绍: Java 是世界上最流行、最通用的编程语言之一,它被用于从 Web 应用程序到移动应用程序的所有领域。如果您要开始 Java 之旅,了解基础知识至关重要。在本指南中,我们将深入探讨三个基本概念——变量、数据类型和输入/输出操作——它们构成了任何 Java 程序的支柱。在读完...
    编程 发布于2024-11-06
  • 如何根据 Div 的高度保持其纵横比?
    如何根据 Div 的高度保持其纵横比?
    根据高度维护 Div 的长宽比在网页设计中,控制元素的长宽比对于响应式布局至关重要。本题探讨了如何保持 div 的宽度占其高度的百分比,确保元素的形状保持一致,无论其高度如何变化。传统方法是使用 padding-top 来设置 div 的高度一个元素,而 padding-left 可以用作对象宽度的...
    编程 发布于2024-11-06
  • 在 Flet 中处理 DatePicker
    在 Flet 中处理 DatePicker
    我需要执行 DatePicker 的项目。 Veamos el ejemplo que proporciona la documentación oficial de Flet. import datetime import flet as ft def main(page: ft.Page): ...
    编程 发布于2024-11-06
  • 如何调整图像大小以适合圆形 SVG 蒙版?
    如何调整图像大小以适合圆形 SVG 蒙版?
    调整图像大小以适合圆形 SVG 路径尝试使用 SVG 路径从图像中剪切圆形部分时,这一点很重要以确保正确对齐。如果图像不太适合,可能是由于 SVG 蒙版的大小或位置不正确。这里有一种实现所需结果的替代方法:使用增强SVG 蒙版:此方法使用 SVG 蒙版创建一个圆孔,在其中显示图像:<svg w...
    编程 发布于2024-11-06
  • 技术面试问题 - 部分打字稿
    技术面试问题 - 部分打字稿
    Introduction Hello, hello!! :D Hope you’re all doing well! How we’re really feeling: I’m back with the second part of this series. ? In this...
    编程 发布于2024-11-06
  • 如何在 Laravel Eloquent 中为每个唯一的“seller_id”选择具有最大“created_at”的行?
    如何在 Laravel Eloquent 中为每个唯一的“seller_id”选择具有最大“created_at”的行?
    Laravel Eloquent: Select Rows with Maximum Created_at在 Laravel Eloquent 中,你可能会遇到需要选择所有具有最大值的行的场景表中每个唯一的 seller_id 的created_at 值。以下是实现此目的的方法:使用原始 SQL 查...
    编程 发布于2024-11-06
  • ReactJS 中的延迟加载:开发人员指南
    ReactJS 中的延迟加载:开发人员指南
    延迟加载是 ReactJS 中一项强大的技术,它允许组件或元素仅在需要时才加载,从而增强了 Web 应用程序的性能。在本文中,我们将探讨延迟加载的概念、它的好处,以及如何使用内置的 React.lazy() 和 React.Suspense 特征。   什么是延迟加载? 延迟加载是W...
    编程 发布于2024-11-06

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3