Js基礎-閉包

来源:https://www.cnblogs.com/haloujava/archive/2023/09/15/17704442.html
-Advertisement-
Play Games

分享的 HTML 與上圖內容一樣,需要修改的小伙伴可以自行修改內容。 <style><!-- @import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono|Montserrat:700"); * { margin: 0; p ...


在介紹閉包之前,我們先看看是什麼全局變數和局部變數

全局變數和局部變數

局部變數:定義在函數內部的變數(只能在內部被訪問) 形參也是一種局部變數

全局變數:不在函數內部定義的變數, 就稱為全局變數,全局變數在任何函數內都可以被訪問和修改

假如我們在函數內部 定義了一個和外部相同名字的變數, 那麼在函數內部是用的哪個變數呢?

<script>
    var ccc = 5;
    function inner() {
        var ccc = 4;
        console.log(ccc);
    }

    inner();

  </script>

以上結果會輸出4 , 因為在執行過程中, 會由內向外尋找變數的定義,所以局部變數在函數內部比全局變數更有優先被使用的權力

再看一個例子, 假如我們列印外部的ccc變數會輸出什麼?

<script>
    var ccc = 5;
    function inner() {
        var ccc = 4;
    }

    inner();

    console.log(ccc);

</script>

上面的例子會輸出 5, 因為函數內部定義的變數無法被外部看到

我們再來看一個比較奇葩的例子

<script>
    var ccc = 5;
    function inner() {
        ccc += 1;
        var ccc = 4;
        console.log(ccc);
    }

    inner();

</script>

這個例子第一次列印會輸出 NaN , 第二次列印會輸出 4

第二次列印好理解, 因為我們已經知道局部變數優先被使用。

第一次比較奇怪, 按道理講, 在函數內部也應該能引用到外部的全局變數ccc,但是程式的運行結果和我們的推斷相反,這是因為js語言有個比較坑的知識點;即在函數執行前,語法規定把變數的定義提升到 函數的前面。

上面的例子在運行的時候瀏覽器是這麼理解的

<script>
    var ccc = 5;
    function inner() {
				var ccc = undefined;
        ccc += 1;
        ccc = 4;
        console.log(ccc);
    }

    inner();

</script>

這種特性就叫做函數變數提升, 把一個後面定義變數, 提升到前面,因為前面有這個地方的引用。

局部函數

一個函數內部也可以定義另一個函數內部

<script>
        function outer() {

            function inner() {
                console.log("innser函數")
            }

            inner()

        }

        outer();
  </script>

上面的inner() 函數只能再 outer() 函數內部調用

特別註意

如果不加修飾詞定義一個變數的話, 此變數將被視為全局變數,即使它定義在了函數內部

<script>

        function fa() {
            quanju = 10;
        }
        fa();
        console.log(quanju);

    </script>

閉包

概念

從概念上講,閉包就是一個函數以及捆綁在此函數周圍環境狀態的引用組合, 每創建一個函數都會產生一個閉包

這個定義比較抽象,下麵,我們舉個慄子

<script>
      function outter(){
					
					var cons = '常量小常'
          
          return function() {
              return cons;
          } 
      }
			
			// 得到外部函數的內部函數
      var consFun= outter(1,2);
      // 執行內部函數
      consFun();
</script>

這個例子最終會輸出 ‘常量小常’, 雖然內部函數是在外部執行的, 但它依然能夠找到定義時候的一些常量值。這個就是一種閉包的表現形式

Untitled.png

換句話說,就是函數在執行的時候,能夠還原它定義時所處的環境,能夠按照定義時候的樣子去執行

模擬私有變數

很多語言都支持私有變數, 就是將一個變數或者方法聲明為私有,只能被內部使用,外部要想使用只能通過定義的一些公共方法訪問

Js原生不支持這種語法,但可以通過閉包模擬這種私有變數的特性

下麵就是一個閉包模擬私有變數的例子 , privateCounter  變數不能直接被外部訪問,只能通過特定的方法操作。這個例子來源於此:

用閉包模擬私有變數

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures#用閉包模擬私有方法

<script>
      var Counter = (function () {
      var privateCounter = 0;
      function changeBy(val) {
          privateCounter += val;
      }
      return {
          increment: function () {
          changeBy(1);
          },
          decrement: function () {
          changeBy(-1);
          },
          value: function () {
          return privateCounter;
          },
      };
      })();

      console.log(Counter.value()); /* logs 0 */
      Counter.increment();
      Counter.increment();
      console.log(Counter.value()); /* logs 2 */
      Counter.decrement();
      console.log(Counter.value()); /* logs 1 */

  </script>
請關於一下啦^_^

微信公眾號


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

-Advertisement-
Play Games
更多相關文章
  • 本文將從 e2e 的基本介紹,e2e 的使用與擴展,session 日誌隔離三個維度為大家帶來 ChunJun e2e & session 日誌隔離的分享。 大量具體代碼和演示請看視頻教程⬇️ 視頻課程: https://www.bilibili.com/video/BV1ru411P7oZ/?sp ...
  • 一、升級路線 10.2.0.5,11.1.0.7,11.2.0.2以上版本可以直接升級到12c。 10.2.0.5以前的版本和11.2.0.1版需要先升級到中間版本,再升級到12c。 二、環境說明 操作系統:Red Hat 8 Linux 64位 源資料庫版本:Oracle 11.2.0.3 目標數 ...
  • NineData SQL開發企業版是一款強大的資料庫管理工具,旨在解決企業在資料庫管理方面所面臨的各種挑戰。該工具提供了一整套企業級能力,包括團隊協作、許可權管控、審計日誌、SSO單點登錄等功能。它還提供超過100條SQL規範審核,幫助企業規範使用和變更資料庫。通過該工具,用戶可以簡化繁瑣的資料庫管理... ...
  • 簡述 SAP HANA 是由 SAP 開發的一款記憶體列式資料庫, 具有預測分析、空間數據處理、文本分析、文本搜索、流分析、圖形數據處理等高級分析功能。 HANA 記憶體列式資料庫特性,即啟動後可以把所有數據載入記憶體,相比傳統基於硬碟的資料庫,性能提升10~10,000倍。 HANA 一般內置在 SAP ...
  • 首先,先搞明白一個概念,這裡的 Java 混合 Kotlin 是指文件層級的混合,即 Java 代碼還是寫在 .java 文件中,Kotlin 代碼還是寫在 .kt 文件中,只不過是可以在 Java 的代碼中可以調用自己寫好的 Kotlin 類,從 Java 的角度看,它並不知道它調用的這個類是 K ...
  • 目錄前言一、監聽UITextField 內容變化1. 代理2. 通知3. 目標動作事件二、監聽UITextView文本內容高度變化三、cell中的文本框,在reloadData or reloadRow後失去焦點四、手機號碼、銀行卡號格式化 前言 本文總結了在使用 UITextField & UIT ...
  • 最近在寫項目的一些公共組件(一些選擇器),很多個地方都需要用,所以在main.js全局聲明瞭,但發現子頁面調用還是有挺多的地方需寫。 例如,要在template實例化組件,並用ref綁定,然後在js里的methods里寫方法。 main.js 聲明全局組件 第一種方案 一開始想到的是用ref綁定組件 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 背景 應用背景:vite搭建的vue3項目 需求背景:功能都涉及了支付業務,故需要和外部支付系統對接 外部支付系統:聚合支付、微信小程式支付、微信H5支付 目錄 讀完本文,你將會對以下幾個坑點有所瞭解: 對接第三方服務商過程踩坑 對接小程 ...
一周排行
    -Advertisement-
    Play Games
  • 一個自定義WPF窗體的解決方案,借鑒了呂毅老師的WPF製作高性能的透明背景的異形視窗一文,併在此基礎上增加了滑鼠穿透的功能。可以使得透明窗體的滑鼠事件穿透到下層,在下層窗體中響應。 ...
  • 在C#中使用RabbitMQ做個簡單的發送郵件小項目 前言 好久沒有做項目了,這次做一個發送郵件的小項目。發郵件是一個比較耗時的操作,之前在我的個人博客裡面回覆評論和友鏈申請是會通過發送郵件來通知對方的,不過當時只是簡單的進行了非同步操作。 那麼這次來使用RabbitMQ去統一發送郵件,我的想法是通過 ...
  • 當你使用Edge等瀏覽器或系統軟體播放媒體時,Windows控制中心就會出現相應的媒體信息以及控制播放的功能,如圖。 SMTC (SystemMediaTransportControls) 是一個Windows App SDK (舊為UWP) 中提供的一個API,用於與系統媒體交互。接入SMTC的好 ...
  • 最近在微軟商店,官方上架了新款Win11風格的WPF版UI框架【WPF Gallery Preview 1.0.0.0】,這款應用引入了前沿的Fluent Design UI設計,為用戶帶來全新的視覺體驗。 ...
  • 1.簡單使用實例 1.1 添加log4net.dll的引用。 在NuGet程式包中搜索log4net並添加,此次我所用版本為2.0.17。如下圖: 1.2 添加配置文件 右鍵項目,添加新建項,搜索選擇應用程式配置文件,命名為log4net.config,步驟如下圖: 1.2.1 log4net.co ...
  • 之前也分享過 Swashbuckle.AspNetCore 的使用,不過版本比較老了,本次演示用的示例版本為 .net core 8.0,從安裝使用開始,到根據命名空間分組顯示,十分的有用 ...
  • 在 Visual Studio 中,至少可以創建三種不同類型的類庫: 類庫(.NET Framework) 類庫(.NET 標準) 類庫 (.NET Core) 雖然第一種是我們多年來一直在使用的,但一直感到困惑的一個主要問題是何時使用 .NET Standard 和 .NET Core 類庫類型。 ...
  • WPF的按鈕提供了Template模板,可以通過修改Template模板中的內容對按鈕的樣式進行自定義。結合資源字典,可以將自定義資源在xaml視窗、自定義控制項或者整個App當中調用 ...
  • 實現了一個支持長短按得按鈕組件,單擊可以觸發Click事件,長按可以觸發LongPressed事件,長按鬆開時觸發LongClick事件。還可以和自定義外觀相結合,實現自定義的按鈕外形。 ...
  • 一、WTM是什麼 WalkingTec.Mvvm框架(簡稱WTM)最早開發與2013年,基於Asp.net MVC3 和 最早的Entity Framework, 當初主要是為瞭解決公司內部開發效率低,代碼風格不統一的問題。2017年9月,將代碼移植到了.Net Core上,併進行了深度優化和重構, ...