」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > JavaScript 中的提升

JavaScript 中的提升

發佈於2024-11-06
瀏覽:219

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:利用模型關係此方法涉及定義模型之間的關係並使用可遏制的行為。考慮以下模型關係:cla...
    程式設計 發佈於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 widt...
    程式設計 發佈於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 特徵。   什麼是延遲載入? 延遲載入是We...
    程式設計 發佈於2024-11-06

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3