輕鬆學習 JavaScript——第 5 部分:簡化函數提升

来源:https://www.cnblogs.com/z335/archive/2018/01/11/8270502.html
-Advertisement-
Play Games

為了理解函數提升,讓我們從以下代碼開啟我們的學習之旅: 應該輸出什麼呢? 在任何其他編程語言中,這裡的輸出將會是reference error。但是,在JavaScript中,你將得到undefined作為輸出。為什麼?因為JavaScript會提升變數到執行上下文的頂部。執行上下文可以是聲明變數的 ...


為了理解函數提升,讓我們從以下代碼開啟我們的學習之旅:

console.log(foo);
var foo = 9;</pre>

應該輸出什麼呢?

在任何其他編程語言中,這裡的輸出將會是reference error。但是,在JavaScript中,你將得到undefined作為輸出。為什麼?因為JavaScript會提升變數到執行上下文的頂部。執行上下文可以是聲明變數的函數,也可以是聲明變數的JavaScript文件。所以,讓我們用函數重寫上面的代碼片段:

function abc() {
    console.log(foo);
    var foo = 9;
}
abc();

這裡,變數“foo”提升到函數abc執行上下文的頂部;這意味著你可以在聲明之前訪問foo。簡而言之,無論何時你聲明一個變數,JavaScript解釋器都可以將其分成兩個語句:

  • 聲明一個變數。
  • 賦值。

變數的聲明位於執行上下文的頂部,而賦值發生在創建變數的位置。所以上面的代碼片段被分解成兩個語句,如下圖所示:

  image

變數foo被提升到函數abc的執行上下文的頂部,因此當你在聲明之前使用它時,你會得到“undefined”作為輸出。

請記住,使用let語句聲明的變數不會被提升到執行上下文的頂部。

現在你知道JavaScript中的變數是如何被提升的了,接下來讓我們來探討JavaScript中的函數提升。在JavaScript中,可以通過兩種方式來創建函數:

  • 作為聲明而創建的函數。
  • 作為表達式而創建的函數。

作為聲明或語句創建的函數作為一個整體提升到執行上下文的頂部。但是,作為表達式創建的函數會像變數一樣提升。

為了說明這一點,讓我們創建一個作為語句的函數:

foo();
function foo() {
    console.log("hello");
}

在上面的代碼中,如果你在函數創建之前使用函數,那麼你會得到hello的輸出。發生這種情況的原因是,作為語句創建的函數會當作一個整體被提升到執行上下文的頂部。

無論何時創建作為語句的函數,都可以在函數創建之前使用該函數。因此,如果你在第5行創建作為語句的函數,那麼你可以在第1-4行中使用該函數,因為函數語句會隨函數主體一起提升到執行上下文的頂部。

函數語句會隨函數主體一起提升到執行上下文的頂部。

函數表達式會像一個變數一樣被提升到執行上下文的頂部。請看下麵的代碼:

foo();
var foo = function () {
    console.log("hello");
}

你正在代碼中創建函數foo作為表達式,所以JavaScript會像普通變數一樣提升它。 JavaScript會像下圖所示那樣處理上面的代碼:

  image

正如你在上面的圖片中看到的那樣,foo在執行上下文的頂部被聲明為一個變數,然而,在變數foo中的函數賦值發生在第6行,也就是創建作為表達式函數的地方。所以,當你嘗試執行上面的代碼時,你會得到錯誤undefined is not a function,如下圖所示:

  image

因此,你不能在函數表達式被創建之前使用函數表達式,因為只有函數聲明會提升到頂部。

綜上所述:

  • 函數語句隨函數主體一起被提升到執行上下文的頂部。你可以在函數創建之前使用作為語句創建的函數。
  • 函數表達式在創建之前不能使用。只有聲明部分會被提升,賦值發生在創建函數的那一行。

歡迎加入學習交流群569772982,大家一起學習交流。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • (一)函數指針 定義:如果在程式中定義了一個函數,在編譯時,編譯系統為函數代碼分配一段存儲空間,這段存儲空間的起始地址稱為這個函數的指針。 (二)使用函數指針變數調用函數 小例子,取最大值 可見,定義指向函數的指針變數的一般格式類型名 (*指針變數名)(函數參數列表)int (*p) (int ,i ...
  • Github地址: https://github.com/ccyinghua/appEleme-project 一、構建項目所用: 二、組件腦圖 三、markdown項目說明 Mock.md - 模擬json數據 Header.md - 頭部組件開發說明 Goods.md - 商品組件開發說明 Fo ...
  • System類,系統類,包含的是靜態方法,無法創建對象 這裡介紹幾個簡單的方法,其他一些在後邊用到的時候會講 類方法: currentTimeMillis():獲取當前毫秒數 exit()方法:退出JVM虛擬機 gc()方法:收取對象的垃圾,這個不需要舉例,知道即可 getProperties()方 ...
  • 在Java遇到了將類似“1|2|3|4”的字元串分隔為數組的功能 這種問題能難倒有著十多年開發經驗的的.NET碼農? 結果,出來的數組是這個鬼樣子 1,|,2,|,3 仔細看看split傳入的參數名,regex,是正則表達式,恍然大悟,要轉義正則表達式…… 問題解決後,繼續手賤研究這個split,尋 ...
  • 這裡介紹基本數據類型包裝類,Integer是int的包裝類, 其他的基本數據類型的包裝類的方法和Integer的方法幾乎一致,會一種即可全會 基本數據類型包裝類的特點:用於在基本數據類型和字元串之間進行轉換 這些類屬於java的核心類,不需要import Integer類的方法: parseInt方 ...
  • 相關介紹:  樹(英語:tree)是一種抽象數據類型(ADT)或是作這種抽象數據類型的數據結構,用來模擬具有樹狀結構性質的數據集合。它是由n(n 0)個有限節點組成的一個具有層次關係的集合。把它叫做“樹”是因為它看起來像一棵倒掛的樹,也就是說它是根朝上,而葉朝下的。樹形結構中數據元素之間具 ...
  • 前言:在Spring中可以通過對方法進行事務的配置,而不是像原來通過手動寫代碼的方式實現事務的操作,這在很大程度上減少了開發的難度,本文介紹Spring事務配置的兩種方式:基於配置文件的方式和基於註解的方式。並對配置過程中可能出現的問題作出總結。 一、基於配置文件的方式,具體如下: 註:配置文件中, ...
  • 接觸Java第三天,嘿嘿,今天近代史期末考試,提前一小時交卷,回宿舍繼續學習,中午去見女神姐姐了,每次見完女神姐姐都是滿滿地動力。這次女神姐姐告訴我們要好好規劃自己的時間,早上花20分鐘規劃好一天的時間安排,晚上睡覺前做個小總結。當你覺得你一天都在忙,但卻不知道自己在忙什麼的時候,就應該總結一下,就 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...