了解 JavaScript 閉包：變數、函數和作用域。

「Javascript 閉包是程式設計中的一個基本概念，它使函數能夠存取和操作周圍範圍的變數。這種強大的技術可以實現資料封裝、上下文保存和高效的記憶體管理。了解Javascript 閉包對於開發健壯、可擴展和可維護的應用程式至關重要。 現在讓我們來看看 Javascript 中的閉包是什麼。我想用三種方式來定義它：以簡單和簡潔的方式，以技術和詳細的方式，以及以概念和類似的方式。

JavaScript 中什麼是閉包？

「閉包是一個通道，透過該通道，另一個函數內的函數可以存取其自身的作用域及其外部函數的作用域，即使外部函數已傳回。」。

「閉包也可以稱為自包含函數，它維護對其周圍詞法作用域的引用，允許它存取和操作該作用域中的變量，即使該函數是在其原始上下文之外調用的。 ” .

「封閉就像一個有記憶的房間。當一個函數在另一個函數內部創建時，它會繼承外部函數的作用域，就像房間繼承其所在建築物的特徵一樣。即使外部函數「關閉」（返回），內部函數也會記住外部作用域，從而允許它存取它的變數和函數」。這些定義突顯了 JavaScript 閉包的不同面向。

為了支持定義或更好地理解主題，請考慮這樣的閉包。想像一下，你有一個玩具盒容器，裡面存放著所有你喜歡的玩具（玩具盒容器是我們的外部功能）。現在想像一下，玩具容器（外部功能）內有不同的玩具，例如汽車、洋娃娃和機器人等。 （這些是變數或任何其他函數）在這些玩具中，你有一個特殊的玩具（內部函數），它就是機器人。想像機器人透過通道擁有特殊的能力；即使玩具盒關閉時，它也可以玩或連接玩具盒內的所有其他玩具。想像一下那個特殊的通道或力量被關閉。我希望你明白這一點。讓我們看一個程式碼範例來說明閉包。

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

在上面的程式碼中，displayDetails是函數或閉包，或者更好，參考程式碼之前的插圖。函數 displayDetails 正在使用閉包的力量來存取其範圍之外的變數。事情是這樣的。 displayDetails 在詳細資料內部定義，它從外部範圍存取 surName 和 lastName，即使在其範圍之外也保留此存取權限。或者，以另一種方式，details 使用 surName 和 lastName 建立一個範圍，displayDetails 存取此範圍，displayDetail 使用 surName 和 lastName 傳回字串，details 傳回 displayDetails 的結果。 console.log(詳細資料()); 呼叫 displayDetails，存取外部範圍變數。
這段程式碼的輸出是嘿約翰憐憫，你已經註冊了
結果如下圖

現在您了解了閉包，讓我們看看閉包在 Javascript 程式碼編寫中的好處。

閉包中的變數

• 局部變數：在函數內宣告的變量，只能在函數作用域內訪問，在作用域外不可訪問。
• 外部變數：外部函數中宣告的變數可以被內部函數存取
• 全域變數：在所有函數外部宣告的變量，可以從任何地方存取

閉包中的函數

• 內部函數：這些是在另一個可以存取外部作用域的函數中定義的函數
• 外部函數：此函數定義內部函數
的範圍
• 函數表達式：定義為表達式的函數可以用作閉包

閉包中的範圍

• 詞法作用域：內部函數可以存取外部作用域。
• 動態作用域：作用域在執行時決定（未在 JavaScript 中使用）。

關閉有什麼好處？

• 資料隱藏：保護資料免遭外部訪問 讓我們在下面的程式碼中查看展示此資料隱藏的程式碼範例

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

在上面的程式碼中，函數 Person 接受兩個參數：姓名和年齡，該函數會建立一個新的 person 物件。在函數內部，宣告了兩個私有變數：privateName 和 privateAge。這些變數被指派傳遞給 person 函數的值（姓名和年齡）。這些變數是私有的，因為它們是用 let 宣告的，並且不能在 Person 函數外部直接存取。返回物件也是透過三種方法創建的。這三種方法提供對私有變數的受控存取。因此，Person 函數建立了一個閉包，允許傳回的物件存取私有變數。此外，私有變數對外部存取是隱藏的，從而提供資料保護。

• 封裝：捆綁資料與方法
• 上下文保留：在非同步呼叫中保留上下文。

閉包的常見用例

• 事件監聽器或事件處理：保留事件上下文。這是一個簡單的事件處理程式碼

<script>
        function details() {
            let surName = 'john';
            let lastName = 'mercy';
            function displayDetails() {
                return `hey ${surName} ${lastName} you have been registered`;
            }
            return displayDetails();
        }
        console.log(details());
    </script>

這是程式碼中發生的事情。我們定義一個函數 createClickCounter 傳回另一個函數。在 createClickCounter 內部，我們宣告了一個初始化為 0 的變數 clickCounter。
傳回的函數增加 clickCounter 並更新 clickCounterElement 的文字內容。我們呼叫 createClickCounter() 建立一個閉包並將其指派給 counter 變數。我們使用 addEventListener 將計數器函數附加到按鈕的點擊事件。

counter 函數是一個閉包，因為它可以存取自己的作用域，可以存取外部函數的作用域 (createClickCounter())，在函數呼叫之間保留 clickCounter 的狀態。

• 回呼函數：在非同步呼叫中保留上下文。
• 私有模組：建立私有變數和函數

結論

JavaScript 閉包讓開發人員能夠編寫高效、模組化且安全的程式碼。透過掌握變數、函數和範圍，開發人員可以充分利用閉包的潛力。閉包支援資料封裝、狀態保存和私有變量，從而提高程式碼品質和可維護性。有了這種基本的理解，開發人員就可以自信地應對複雜的 Javascript 挑戰。有效使用閉包對於可擴展、健壯且高效的 JavaScript 應用程式至關重要。

以上是了解 JavaScript 閉包：變數、函數和作用域。的詳細內容。更多資訊請關注PHP中文網其他相關文章！