JavaScript中的匿名函數、立即執行函數和閉包

来源:https://www.cnblogs.com/uakora/archive/2020/04/14/12695429.html
-Advertisement-
Play Games

匿名函數是沒有函數名的，不能單獨使用； 立即執行函數是基於匿名函數實現的，也沒有函數名，會在定義後立即執行； 閉包是有權訪問另一個函數作用域中的變數的函數。匿名函數、立即執行函數只要滿足 有權訪問另一個函數作用域中的變數 這一個條件，就成了閉包。 匿名函數 匿名函數：沒有函數名的函數 匿名函數不能單 ...


匿名函數是沒有函數名的，不能單獨使用；

立即執行函數是基於匿名函數實現的，也沒有函數名，會在定義後立即執行；

閉包是有權訪問另一個函數作用域中的變數的函數。匿名函數、立即執行函數只要滿足 有權訪問另一個函數作用域中的變數 這一個條件，就成了閉包。

匿名函數

匿名函數：沒有函數名的函數

匿名函數不能單獨定義與使用

function foo() {
  console.log('普通函數');
}
// 去掉函數名 foo 
function () { // SyntaxError: Function statements require a function name
  console.log('匿名函數');
}
匿名函數的應用場景
  • 用於函數表達式
  • 作為返回值
  • 用於定義對象方法
  • 作為回調函數
  • 用於立即執行函數
  • 用於DOM元素註冊事件
  • 其他 ...

用於函數表達式

var sum = function (num1, num2) {
  return num1 + num2;
};
console.log(sum(2, 3));

作為返回值

function sum(sum1, sum2) { 

  return function() {
    return sum1 + sum2;    
  }

}
console.log(sum(2, 3));    // [Function]
console.log(sum(2, 3)());  // 5

用於定義對象方法

var obj = {
  name: 'uakora',
  age: 27,
  foo: function() {
    console.log(this.name + ' ' + this.age);
  }
};
obj.foo(); // uakora 27

作為回調函數

setTimeout(function() {
  console.log('匿名函數作為回調函數');
}, 1000);

用於立即執行函數

(function() {
  console.log('立即執行函數是基於匿名函數創建的');
}());

用於DOM元素註冊事件

<input type="button" value="Click me！" id="btn">
<script>
    var btn = document.querySelector("#btn");
    //給按鈕註冊點擊事件
    sub.onclick = function(){
        console.log('Click event');
    }
</script>

立即執行函數

立即執行函數(IIFE，Immediately-Invoked Function Expression)，是一種在定義後就會立即執行的函數，其實質是一種語法。

立即執行函數的形式

兩種常用形式

常用形式一：將匿名函數包裹在一個括弧運算符中，後面再跟一個括弧

(function () {
  console.log('立即執行函數');
})(); // !!!特別說明：若此立即執行函數後面立馬又跟著一個立即執行函數，一定要在結尾加分號，否則後面的立即執行函數會報錯！

// 上一個立即執行函數不加分號，下行代碼將報錯：TypeError: (intermediate value)(...) is not a function
(function (a, b, c) { // 形參
  console.log(a + b + c);  // 6
})(1, 2, 3); // 實參

常用形式二：匿名函數後面跟一個括弧，再將整個包裹在一個括弧運算符中

(function () {
  console.log('立即執行函數');
}());

(function (a, b, c) { // 形參
  console.log(a + b + c);  // 6
}(1, 2, 3)); // 實參

其他形式

可以用 !、+、-、~ 運算符代替常用形式一中的第一個括弧

!function (a, b, c) { 
  console.log(a + b + c);  // 6
}(1, 2, 3);

+function (a, b, c) { 
  console.log(a + b + c);  // 6
}(1, 2, 3);

-function (a, b, c) { 
  console.log(a + b + c);  // 6
}(1, 2, 3);

~function (a, b, c) { 
  console.log(a + b + c);  // 6
}(1, 2, 3);
立即執行函數的作用

立即執行函數最本質的作用是：創建一個獨立的作用域。利用這一功能，可以

  • 初始化數據和頁面（只執行一次）
  • 模塊化開發中，定義私有變數，防止污染全局（獨立作用域）
  • 解決閉包中的狀態保存問題；（常見的一個函數內部返回多個函數，調用這些函數，列印父函數內部變數的問題）

案例分析

var liList = document.getElementsByTagName('li');
for(var i = 0; i < liList.length; i++) {
  liList[i].onclick = function() {
    alert(i); // 結果：alert 出來的總是 6, 而不是0、1、2、3、4、5
  }
}

期望結果：0、1、2、3、4、5
實際結果：alert 出來的總是 6
原因分析：沒有形成獨立作用域，每次點擊執行函數都是去訪問同一個 i 值（且是迴圈結束後的值 6）
解決方案：使用立即執行函數為每個 li 元素的點擊事件函數創建獨立作用域

var liList = document.getElementsByTagName('li');
for (var i = 0; i < 6; i++) {
  (function (i) {
    liList[i].onclick = function () {
      alert(i); // 0、1、2、3、4、5
    }
  })(i);
}

閉包

  閉包是指有權訪問另一個函數作用域中的變數的函數。創建閉包的常見方式，就是在一個函數內部創建另一個函數。閉包可以有函數名，也可以是匿名函數(沒有函數名)；

閉包形式一：直接以匿名函數的形式作為外部函數的返回值（普遍用法）

function outer() {
  var n = 1;

  return function() {
    n++; // 訪問 outer 函數作用域中的變數 n，形成閉包
    console.log(n);
  }
}

outer()();

閉包形式二：在外部函數內定義一個內部函數，並返回內部函數名

function outer() {
  var n = 1;

  function inner() {
    n++; // 訪問 outer 函數作用域中的變數 n，形成閉包
    console.log(n);
  }

  return inner;
}

outer()();

閉包形式三：在外部函數內定義一個立即執行函數

function outer() {
  var n = 1;

  (function() {
    n++; // 訪問 outer 函數作用域中的變數 n，形成閉包
    console.log(n);
  })();

}

outer();
閉包的作用

作用一：可以直接訪問函數作用域中的變數
作用二：可以將函數作用域中的變數如全局變數一樣始終保存在記憶體中 （其實能否一直保存局部變數，跟閉包的執行形式有關）

說明：作用二的解析為個人理解

以下示例為證明觀點：閉包能否一直保存局部變數，跟閉包的執行形式有關

閉包執行方式一：在返回的閉包後面緊跟一個 () ，立即執行

function outer() {
  var n = 1;

  function inner() {
    n++;
    console.log(n);
  }

  return inner;
}

outer()();  // 2
outer()();  // 2

閉包執行方式二：將返回的閉包賦值給一個全局變數，全局變數運行 () 操作，執行閉包

function outer() {
  var n = 1;

  function inner() {
    n++;
    console.log(n);
  }

  return inner;
}

var inner = outer();
inner();    // 2
inner();    // 3  （是在 2 的基礎上加 1）

以上兩種執行方式單獨使用，只能說明 第二種執行方式，能使閉包一直保存局部變數，但還不能證明閉包的第一種執行方式不能一直保存局部變數，因為每次執行 outer()函數時，變數 n 都被重新初始化了。

請繼續看以下代碼，同時使用了閉包的兩種執行方式：

function outer() {
  var n = 1;

  function inner() {
    n++;
    console.log(n);
  }

  return inner;
}

var inner = outer();

outer()();  // 2
outer()();  // 2  (Flag1)

inner();    // 2  (Flag2)
inner();    // 3

可以看到，Flag1 跟 Flag2 的值都是 2，假設 outer()() 這樣的閉包執行方式會一直保存局部變數在記憶體的話，那 Flag2 處的值應該是 3。

顯然假設不成立。

從而說明：閉包並非就一定可以一直保存局部變數在記憶體，還跟執行方式有關。

主動釋放記憶體
function outer() {
  var n = 1;

  function inner() {
    n++;
    console.log('n = ', n);
  }

  return inner;
}

var inner = outer();
inner();    // 2  
inner();    // 3

inner = null;  // 解除對閉包的引用，以便釋放記憶體
閉包的應用場景
  • 保護函數局部變數的安全
  • 在記憶體中維持一個變數
  • 通過保護變數的安全實現JS私有屬性和私有方法（不能被外部訪問）

使用閉包的註意點

  由於閉包會攜帶 包含它的函數 的作用域，因此會比其他函數占用跟多的記憶體。過度使用閉包可能會導致記憶體占用過多


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

-Advertisement-
Play Games
更多相關文章
  • asap非同步執行實現原理
    目錄 為什麼分析asap asap概述 asap源碼解析—Node版 參考 1.為什麼分析asap 在之前的文章 "async和await是如何實現非同步編程?" 中的 “淺談Promise如何實現非同步執行” 小節，提到了 Promise 非同步執行是通過 "asap" 這個庫來實現的。所以為了進一步深 ...
  • 分享數組概念、創建、賦值、長度與使用
    3-1什麼是數組?變數用來存儲數據，一個變數只能存儲一個內容,如果要存儲多個數據怎麼辦？此時就需要用到數組，數組是一個值的集合，每個值都有一個索引號，從0開始，每個索引都有一個相應的值，根據需要添加更多數值。 1 <script type="text/javascript"> 2 var myarr ...
  • JS 實現計算器功能
    括弧功能未實現，後續更 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit ...
  • 從 defineProperty 到 Proxy
    眾所周知，Vue 2.x 的數據綁定是通過 defineProperty。而在 Vue 3.x 的設計中，數據綁定是通過 Proxy 實現的，這兩者到底有何異同？ 一、definePropety defineProperty 是 Object 的一個方法，可以在對象上新增或編輯某個屬性，可編輯的內容 ...
  • React 中 ref 的使用
    實例：獲取button元素離頁面頂部的距離 ref寫在html元素上 import React,{Component,Fragment} from 'react'; import Child from './Child'; class Counter extends Component{ const ...
  • ES6---Promise 4:
    1. var p1 = new Promise((resolve, reject) => { }); var p2 = p1.then( result => { }, error => { } ); //可以看到p1和p2都是promise，還可以看到狀態 console.log(p1); cons ...
  • React添加事件
    React添加事件,和DOM上添加事件類似,但又有細微的不同. React添加事件,需要註意: 1.React的事件命名採用小駝峰(camelCase)的命名方式,DOM採用的是純小寫的方式; 2.使用JSX語法時,需要傳入一個函數作為事件的處理函數,DOM傳入的是一個字元串(雖然DOM中傳入的事件 ...
  • Bootstrap4網格系統+文字排版+顏色 簡單練習
    我現在學bootstrap是不是太遲了哈哈哈 先來個小案例熟悉下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <link rel="stylesheet" href="http ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類