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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類