JavaScript 作用域和閉包

来源:https://www.cnblogs.com/yuzhihui/archive/2023/01/21/17040313.html
-Advertisement-
Play Games

JavaScript 中的作用域指的是變數和函數的可訪問範圍。 JavaScript 中,閉包是一個函數對象,它可以訪問定義該函數的作用域里的變數,即使函數已經返回。閉包的特點是,它可以在其相關環境不存在時保留變數。閉包可以被保存到變數中併在以後使用。它具有兩個特征,一是可以訪問外部函數的變數,二是... ...


一、作用域

JavaScript 中的作用域指的是變數和函數的可訪問範圍。JavaScript 使用詞法作用域,即作用域由代碼的書寫結構決定,而不是運行時環境。

二、閉包

JavaScript 中,閉包是一個函數對象,它可以訪問定義該函數的作用域里的變數,即使函數已經返回。閉包的特點是,它可以在其相關環境不存在時保留變數。閉包可以被保存到變數中併在以後使用。它具有兩個特征,一是可以訪問外部函數的變數,二是它可以在外部函數執行結束後繼續執行。閉包可以用來實現私有變數,記憶函數(緩存),高階函數等功能。

簡單來說,閉包是一個能夠訪問其他函數作用域中變數的函數。

三、閉包的應用

1、封裝私有變數

閉包的一個常見用途是構建私有變數。當你使用閉包封裝變數時,外部代碼就無法訪問這些變數了。

下麵是一個使用閉包來創建私有變數的示例:

function createCounter() {
  let count = 0;
  return function() {
    return count++;
  }
}

let counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

在這個例子中,createCounter 函數返回了一個閉包。這個閉包訪問了創建時所在作用域中的變數 count。外部代碼不能訪問這個變數,因此這個變數就成為了一個私有變數。

2、高階函數

高階函數是指一個函數,其參數或返回值是一個函數。閉包可以用來捕獲函數作用域中的變數,並將它們傳遞給高階函數。

下麵是一個使用閉包來構建高階函數的示例:

function createMultiplier(x) {
    return function(y) {
        return x * y;
    }
}

let double = createMultiplier(2);
console.log(double(3)); //6
console.log(double(5)); //10
let triple = createMultiplier(3);
console.log(triple(2)); //6
console.log(triple(3)); //9

在這個例子中,createMultiplier是一個高階函數,它返回了一個閉包。 這個閉包捕獲了它定義時所在作用域中的變數 x 併在閉包內部運用這個變數進行運算。

3、延遲計算(高階函數的一種具體實現)

通過閉包,可以將函數和其詞法環境存儲在變數中,直到需要執行函數時再調用它。

function makeAdder(x) {
    return function (y) {
        return x + y;
    };
}
const add5 = makeAdder(5);
console.log(add5(3)); // 8

4、實現私有屬性和私有方法

閉包還有一個重要的應用場景就是實現面向對象編程中的私有屬性和私有方法。

以下是一個使用閉包實現私有屬性和私有方法的例子:

function Person(name) {
    let _name = name;
    this.getName = function() {
        return _name;
    }
    this.setName = function(name) {
        _name = name;
    }
}
let p = new Person('John');
console.log(p.getName()); // John
p.setName('Mike');
console.log(p.getName()); // Mike

在這個例子中,_name 是私有變數,getName() 和 setName() 是私有方法。由於它們是在構造函數中定義的,所以它們可以訪問到 _name 變數。而外部無法直接訪問 _name 變數。

閉包的使用能夠幫助我們實現面向對象編程中的私有屬性和私有方法,使代碼更加安全和可維護。

5、實現計數器(封裝私有變數的一種具體實現)

function makeCounter() {
    let count = 0;
    return function() {
        return count++;
    };
}
const counter = makeCounter();
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

6、實現防抖函數

通過閉包可以實現一個防抖函數,在指定時間內只會執行一次。

function debounce(fn, delay) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}
const debouncedFn = debounce(() => {
    console.log('Debounced function called.');
}, 1000);

7、實現節流函數

通過閉包可以實現一個節流函數,每隔一段時間執行一次。

function throttle(fn, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(this, arguments);
                timer = null;
            }, delay);
        }
    };
}
const throttledFn = throttle(() => {
    console.log('Throttled function called.');
}, 1000);

8、實現自執行函數

通過閉包可以實現一個自執行函數,可以在定義時立即執行。

(function () {
    console.log('Self-executing function called.');
})();

9、實現單例模式

單例模式是一種常用的設計模式,它保證一個類只有一個實例,並且提供了一個全局訪問點來訪問這個實例。使用閉包可以很容易地實現單例模式。

下麵是一個使用閉包實現單例模式的例子:

const Singleton = (function() {
    let instance;
    function createInstance() {
        return {};
    }
    return {
        getInstance: function() {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();
console.log(Singleton.getInstance() === Singleton.getInstance()); // true

在這個例子中,Singleton 函數返回了一個對象,它包含一個 getInstance() 方法。這個方法用於獲取單例的實例。如果實例不存在,則調用 createInstance() 創建一個新的實例。因為 createInstance() 和 instance 變數都在閉包中定義,所以只能被 getInstance() 方法訪問到。

這樣就可以保證單例模式的特性了,在多次調用 getInstance() 方法時,都會返回同一個實例。

10、實現模塊模式

通過閉包可以實現模塊模式,將代碼封裝在單獨的模塊中,保證變數和函數不會污染全局作用域。

const myModule = (function () {
    let _privateValue = 'Hello, World!';
    function _privateFunction() {
        console.log(_privateValue);
    }
    return {
        publicFunction: function () {
            _privateFunction();
        }
    };
})();
myModule.publicFunction(); // 'Hello, World!'
console.log(_privateValue); // ReferenceError: _privateValue is not defined

11、實現類似於塊級作用域的效果

通過閉包可以實現類似於塊級作用域的效果,將變數和函數封裝在一個單獨的作用域中,防止變數污染。

for (var i = 0; i < 5; i++) {
    (function(index) {
        setTimeout(() => {
            console.log(index);
        }, 1000 * i);
    })(i);
}

12、實現緩存(記憶函數)

通過創建一個閉包並將需要緩存的數據存儲在其中,可以在需要使用數據時直接從緩存中獲取,而不需要重新計算或重新讀取。

下麵是一個使用閉包實現緩存的例子:

function expensiveFunction() {
    console.log('Calculating...');
    return Math.random();
}

function cache(fn) {
    let cache = {};
    return function (arg) {
        if (!cache[arg]) {
            cache[arg] = fn(arg);
        }
        return cache[arg];
    };
}

const cachedFunction = cache(expensiveFunction);
console.log(cachedFunction(5)); // Calculating... 0.5
console.log(cachedFunction(5)); // 0.5

在這個例子中,我們有一個計算代價高昂的函數 expensiveFunction(),它每次都會計算一個隨機數。我們使用 cache() 函數將其包裝在閉包中,並將計算結果存儲在緩存中。當調用 cachedFunction() 函數時,如果緩存中已經有結果,則直接返回緩存中的結果,而不需要重新計算。如果緩存中沒有結果,則調用 expensiveFunction() 計算結果並將其存儲在緩存中。

在這個例子中,我們將參數作為緩存的鍵,這樣就可以緩存不同參數的結果。

閉包緩存的好處是:

  • 可以避免重覆計算或重覆讀取
  • 可以提高程式的性能
  • 可以將緩存邏輯與主程式邏輯分離,更加清晰

缺點是:

  • 緩存數據會占用記憶體
  • 緩存會在某些時候過期,導致數據不准確
  • 如果緩存過大,會導致性能下降

使用閉包實現緩存是一種常用的優化方式,可以有效地提高程式的性能。然而,也需要註意緩存的維護與管理,避免緩存過大或過期導致的數據不准確的問題。

除了使用閉包實現緩存還有其他方法,比如使用Map,WeakMap,localStorage來存儲緩存數據。

使用閉包實現緩存的方法是一種常用的優化方式,可以有效地提高程式的性能。通過將緩存邏輯封裝在閉包中,可以將緩存邏輯與主程式邏輯分離,使程式更加清晰。

 

閉包是 JavaScript 中一種強大的特性,理解和掌握它的使用方式可以幫助我們編寫出更加高效、可維護的代碼。

需要註意的是,閉包會增加函數作用域鏈的長度,因此如果閉包中存在大量的變數或者被頻繁使用,可能會導致記憶體占用過多,影響性能。

除此之外,閉包也可能會導致作用域鏈上的變數不能及時被垃圾回收機制回收,這就是所謂的閉包記憶體泄漏問題。所以,使用閉包時,需要註意記憶體使用的問題。

在使用閉包時需要註意一些問題,例如:

  • 使用完閉包後,應該及時釋放不再使用的閉包。
  • 避免在迴圈中使用閉包,這可能會導致不同的閉包引用同一個變數。
  • 在使用閉包時,需要謹慎使用 this 和 arguments 變數,因為它們可能會被閉包引用。

同時閉包的應用也會影響到代碼的可讀性和可維護性,需要在使用時考慮清楚。

如果遇到需要閉包且涉及到回調函數,可以使用箭頭函數來簡化代碼,而箭頭函數本身也是閉包的一種,但是其處理方式與普通的函數不同,對作用域和this的綁定等也有區別。

另外,在 ECMAScript6 中,新增了 let 和 const 命令,它們可以用來聲明塊級作用域的變數。let 和 const 命令能夠更好地處理變數提升問題,並且使用塊級作用域可以更好地控制變數的生命周期,減少記憶體泄漏的風險。

在編寫代碼時,應該根據實際需要來選擇使用 var、let 或 const 命令聲明變數。使用 var 命令時,應該儘量避免使用全局變數;使用 let 和 const 命令時,應該儘量避免變數提升問題。

 

總的來說,JavaScript的閉包是一種非常強大的特性,可以幫助我們更好地處理作用域、私有變數、高階函數等問題。但是,使用閉包也需要註意一些性能和記憶體使用的問題。

作者:yuzhihui
出處:http://www.cnblogs.com/yuzhihui/ 聲明:歡迎任何形式的轉載,但請務必註明出處!!!
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • :前言 造車輪的時候要用到中文字元串的長度辨別,發現char的識別不准,進行了一番研究。 > 開始研究 在Windows下,中文字元在C++中的記憶體占用為2位元組,此時採用字元串長度獲取函數得到的結果會將一個中文字元識別為兩個長度: #include <stdio.h> #include <strin ...
  • 2023-01-20 一、springMVC中視圖及視圖解析器對象 1、視圖解析器對象(ViewResolver) (1)概述:SpringMVC中所有視圖解析器對象均實現ViewResolver介面 (2)作用:使用ViewResolver,將View從ModelAndView中解析出來 註:在s ...
  • 作者:京東物流 王北永 姚再毅 李振 1 背景 目前,ducc實現了實時近乎所有配置動態生效的場景,但是配置是否實時生效,不能直觀展示每個機器上jvm內對象對應的參數是否已變更為準確的值,大部分時候需要查看日誌確認是否生效。 2 技術依賴 1)Jsf:京東RPC框架,用作機器之間的通訊工具 2)re ...
  • 2023-01-20 一、SpringMVC處理響應數據 1、處理響應數據方式一 (1)語法:使用ModelAndView對象作為返回值類型,處理響應數據 (2)底層實現原理 ①數據共用到request域 ②跳轉路徑方式:轉發 (3)示例代碼 @RequestMapping("/testModelA ...
  • 常見的網路IO模型有4種:同步阻塞IO、同步非阻塞IO、IO多路復用以及非同步非阻塞IO。 RPC會採用IO多路復用的機制來管理網路通信。 ...
  • 寫在前面 在開發的過程中,大多數人都需要對代碼進行測試。目前對於c/c++項目,可以採用google的gtest框架,除此之外在github上搜索之後可以發現很多其他類似功能的項目。但把別人的輪子直接拿來用,終究比不過自己造一個同樣功能的輪子更有成就感。作為“linux環境編程”系列文章的第一篇,本 ...
  • 基於 LGT8F328P LQFP32 的 Arduino Mini EVB, 這個板型資料較少, 記錄一下開發環境和燒錄過程以及當中遇到的問題. ...
  • 介紹一些我常用的ssh工具 1、Xshell ​ Xshell應該是一款家喻戶曉的ssh連接工具,本人有幸也在很長一段時間都在使用Xshell,但是Xshell他是收費的!而且每次關閉後都會有一個提示框,我很不喜歡,而且Xshell的ftp或其他插件都是需要額外自行下載的,對於文件傳輸不太方便,但是 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...