05. 函數高級-閉包

来源:https://www.cnblogs.com/iflygofy/archive/2019/08/15/11359803.html
-Advertisement-
Play Games

01. JavaScript的運行機制 (1)所有同步任務都在主線程上執行，形成一個執行棧。(2)主線程之外，還有一個“任務隊列”,只要非同步任務有了運行結果，就在“任務隊列”之中放置一個事件。(3)一旦“執行棧”中的所有同步任務執行完畢了，系統就會讀取“任務隊列”，看看裡面有哪些事件。那些對應的非同步 ...


01. JavaScript的運行機制

(1)所有同步任務都在主線程上執行，形成一個執行棧。
(2)主線程之外，還有一個“任務隊列”,只要非同步任務有了運行結果，就在“任務隊列”之中放置一個事件。
(3)一旦“執行棧”中的所有同步任務執行完畢了，系統就會讀取“任務隊列”，看看裡面有哪些事件。那些對應的非同步任務，於是結束等待狀態，進入執行棧，開始執行。
(4)主線程不斷重覆上面的三步。（事件迴圈）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>00_引入</title>
</head>
<body>
    <div id="btn01">
        <button>測試11</button>
        <button>測試12</button>
        <button>測試13</button>
    </div>
    <hr/>
    <div id="btn02">
        <button>測試21</button>
        <button>測試22</button>
        <button>測試23</button>
    </div>
    <hr/>
    <div id="btn03">
        <button>測試31</button>
        <button>測試32</button>
        <button>測試33</button>
    </div>

<!--
需求: 點擊某個按鈕, 提示"點擊的是第n個按鈕"
-->
<script type="text/javascript">
  var btns01 = document.getElementById('btn01').getElementsByTagName('button');
  var btns02 = document.getElementById('btn02').getElementsByTagName('button');
  var btns03 = document.getElementById('btn03').getElementsByTagName('button');
    
    console.log(btns01)
    
  // 有問題 JavaScript的運行機制 主線程上執行，形成一個執行棧,一旦“執行棧”中的所有同步任務執行完畢了，系統就會讀取“任務隊列”
  for(var i=0,length=btns01.length;i<length;i++) {
    var btn = btns01[i]
        console.log(btn)
    btn.onclick = function () {
      alert('第'+(i)+'個 ' + btn.innerHTML)
    }
  }

  // 解決一: 保存下標
  for(var i=0,length=btns02.length;i<length;i++) {
    var btn02 = btns02[i]
    btn02.index = i
    btn02.onclick = function () {
      alert('第'+(this.index+1)+'個 ' +  btns02[this.index].innerHTML )
    }
  }

  // 解決辦法二: 利用閉包
  for(var i=0,length=btns03.length;i<length;i++) {
    (function (i) {
      var btn03 = btns03[i]
      btn03.onclick = function () {
        alert('第'+(i+1)+'個 ' + btn03.innerHTML )
      }
    })(i)
  }
</script>
</body>

</html>

02. 理解閉包

1. 如何產生閉包?
* 當一個嵌套的內部(子)函數引用了嵌套的外部(父)函數的變數(函數)時, 就產生了閉包
2. 閉包到底是什麼?
* 使用chrome調試查看
* 理解一: 閉包是嵌套的內部函數(絕大部分人)
* 理解二: 包含被引用變數(函數)的對象(極少數人)
* 註意: 閉包存在於嵌套的內部函數中
3. 產生閉包的條件?
* 函數嵌套
* 內部函數引用了外部函數的數據(變數/函數)

function fn1 () {
    var a = 3
    function fn2 () {
      console.log(a)
    }
        fn2()
  }
  fn1()

03. 常見的閉包

1. 將函數作為另一個函數的返回值
2. 將函數作為實參傳遞給另一個函數調用

// 1. 將函數作為另一個函數的返回值
  function fn1() {
    var a = 2
    function fn2() {
      a++
      console.log(a)
    }
    return fn2
  }
  var f = fn1()
  f() // 3
  f() // 4

  // 2. 將函數作為實參傳遞給另一個函數調用
  function showMsgDelay(msg, time) {
    setTimeout(function () {
      console.log(msg)
    }, time)
  }
  showMsgDelay('hello', 1000)

04. 閉包的作用

1. 使用函數內部的變數在函數執行完後, 仍然存活在記憶體中(延長了局部變數的生命周期)
2. 讓函數外部可以操作(讀寫)到函數內部的數據(變數/函數)

問題:
1. 函數執行完後, 函數內部聲明的局部變數是否還存在?
2. 在函數外部能直接訪問函數內部的局部變數嗎?

function fun1() {
    var a = 3;
    function fun2() {
      a++;            //引用外部函數的變數--->產生閉包
      console.log(a);
    }
    return fun2;
  }
  var f = fun1();  //由於f引用著內部的函數-->內部函數以及閉包都沒有成為垃圾對象
    
  f();    // 4  間接操作了函數內部的局部變數
  f();    // 5

05. 閉包的生命周期

1. 產生: 在嵌套內部函數定義執行完時就產生了(不是在調用)
2. 死亡: 在嵌套的內部函數成為垃圾對象時

function fun1() {
    //此處閉包已經產生
    var a = 3;
    function fun2() {
      a++;
      console.log(a);
    }
    return fun2;
  }
  var f = fun1();

  f();
  f();
  f = null //此時閉包對象死亡

06. 閉包的應用

自定義JS模塊

* 具有特定功能的js文件
* 將所有的數據和功能都封裝在一個函數內部(私有的)
* 只向外暴露一個包信n個方法的對象或函數
* 模塊的使用者, 只需要通過模塊暴露的對象調用方法來實現對應的功能

// 自定義模塊1
function coolModule() {
  //私有的數據
  var msg = 'message'
  var names = ['I', 'Love', 'you']

  //私有的操作數據的函數
  function doSomething() {
    console.log(msg.toUpperCase())
  }
  function doOtherthing() {
    console.log(names.join(' '))
  }

  //向外暴露包含多個方法的對象
  return {
    doSomething: doSomething,
    doOtherthing: doOtherthing
  }
}
var module = coolModule()
  module.doSomething()
  module.doOtherthing()

自定義模塊2

// 自定義模塊2
(function (window) {
  //私有的數據
  var msg = 'atguigu'
  var names = ['I', 'Love', 'you']
  //操作數據的函數
  function a() {
    console.log(msg.toUpperCase())
  }
  function b() {
    console.log(names.join(' '))
  }

  window.coolModule2 =  {
    doSomething: a,
    doOtherthing: b
  }
})(window)
coolModule2.doSomething()
coolModule2.doOtherthing()

07. 閉包的缺點及解決

1. 缺點
* 函數執行完後, 函數內的局部變數沒有釋放, 占用記憶體時間會變長
* 容易造成記憶體泄露
2. 解決
* 能不用閉包就不用
* 及時釋放

function fn1() {
    var a = 2;
    function fn2() {
      a++;
      console.log(a);
    }
    return fn2;
  }
  var f = fn1();
  f(); // 3
  f(); // 4
  f = null // 釋放

08. 面試題

// 說說它們的輸出情況

  //代碼片段一
  var name = "The Window";
  var object = {
    name: "My Object",
    getNameFunc: function () {
      return function () {
        return this.name;
      };
    }
  };
  console.log(object.getNameFunc()());  //The Window

  //代碼片段二
  var name2 = "The Window";
  var object2 = {
    name2: "My Object",
    getNameFunc: function () {
      var that = this;
      return function () {
        return that.name2;
      };
    }
  };
  console.log(object2.getNameFunc()()); // My Object
// 說說它們的輸出情況

  function fun(n, o) {
    console.log(o)
    return {
      fun: function (m) {
        return fun(m, n)
      }
    }
  }
    
  var a = fun(0)
  a.fun(1)
  a.fun(2)
  a.fun(3) //undefined,0,0,0

  var b = fun(0).fun(1).fun(2).fun(3) //undefined,0,1,2

  var c = fun(0).fun(1)
  c.fun(2)
  c.fun(3) //undefined,0,1,1

 


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

-Advertisement-
Play Games
更多相關文章
  • Promise的三兄弟：all(), race()以及allSettled()
    摘要： 玩轉Promise。 原文： "Promise 中的三兄弟 .all(), .race(), .allSettled()" 譯者：前端小智 "Fundebug" 經授權轉載，版權歸原作者所有。 從ES6 開始，我們大都使用的是 和`Promise.race() Promise.allSett ...
  • vue中獲取滾動table的可視頁面寬度，調整表頭與列對齊(每列寬度不都相同)
    獲取clientWidth，可以調整表頭與列對齊（最後一列的寬度不設置） // 表格滾動 table tbody { display: block; height: 495px; overflow-y: auto; overflow-x: hidden; } // 表頭固定 table thead, ...
  • 前端開發HTML&css入門——CSS&選擇器練習（待補）
    CSS 層疊樣式表 (Cascading Style Sheets)css可以用來為網頁創建樣式表，通過樣式表可以對網頁進行裝飾。所謂層疊，可以將整個網頁想象成是一層一層的結構，層次高的將會覆蓋層次低的。 而css就可以分別為網頁的各個層次設置樣式。 CSS的樣式表由一個一個的樣式構成，一個樣式又由 ...
  • js輪播圖和bootstrap中的輪播圖
    js中的輪播圖案例： <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 800px; heigh ...
  • 關於元素間的邊距重疊問題與BFC
    一、邊距重疊常見情況 1、垂直方向上相鄰元素的重疊 （水平方向上不會發生重疊） 2、 垂直方向上父子元素間的重疊 二、BFC 1、什麼是 BFC BFC（Block Formatting Context），即塊級格式化上下文，創建了 BFC 的元素是一個獨立的容器，裡面無論如何佈局都不會影響到外面的 ...
  • Html頭部meta標簽
    meta元素有4個屬性：name、http-equiv、content、charset.meta標簽通過name屬性來表述頁面文檔的元信息，通過http-equiv屬性設置http請求指令，通過charset設置頁面的字元編碼。按照屬性設置分類，meta可以分為三類: name屬性和content屬 ...
  • JavaScript 面向對象
    1. 什麼是對象？ 對象object 是一些相關的變數和方法的軟體集。 特性： 屬性和方法 JavaScript中的所有事物都是對象。 創建對象的方法： 建立一個工廠函數 2.什麼是面向對象？ 面向對象是一個思想，就是把解決問題的註意力集中到對象上。 面向對象的三大特點：封裝 繼承 多態。 封裝：把 ...
  • 前端項目優化 -Web 開發常用優化方案、Vue & React 項目優化
    前端項目優化 -Web 開發常用優化方案、Vue & React 項目優化 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類