習一門新語言涉及一系列步驟，而掌握一門新語言則是耐心、實踐、錯誤和經驗的產物。

有些開發人員將擁有足夠的知識來根據客戶的需求來提供特性，但是要做一個好開發人員，它需要的不僅僅是它。

一個優秀的開發人員是一個需要時間回來并能很好地掌握語言的基礎/核心概念的人。

今天我們深入研究javascript閉包，希望您所學習的知識對于您的項目有好處。

什么是javascript閉包？

JavaScript閉包當內部函數可以訪問外部函數成員時(詞匯范圍即使在外部函數的范圍外執行時也可以。

因此，我們不能談論關閉問題，同時也不履行職能和范圍。

javascript中的范圍

范圍指程序中定義的變量的可見性程度。在javascript中創建范圍的方法包括：try-catch blocks, functions，let keyword還有花括號里的其他。我們主要有兩種不同的范圍：全球范圍和局部范圍.

var initialBalance = 0 // Global Scopefunction deposit (amount) {
 /**
 * Local Scope
 * Code here has access to anything declared in the global scope
 */
 var newBalance = parseInt(initialBalance) + parseInt(amount)
 return newBalance}

JavaScript中的每個函數在聲明時都會創建自己的本地作用域。

這意味著，在函數的本地范圍內聲明的任何東西都不能從外部訪問。請考慮以下說明：

var initialBalance = 300 // Variable declared in the Global Scopefunction withdraw (amount) {
 var balance // Variable declared in function scope
 balance = parseInt(initialBalance) - parseInt(amount)
 return balance}console.log(initialBalance) // Will output initialBalance value as it is declared in the global scopeconsole.log(balance) // ReferenceError: Can't find variable: balance

詞法范圍

JavaScript的詞法范圍在編譯階段。它設置變量的范圍，以便它只能從定義它的代碼塊中調用/引用它。

在周圍函數塊中聲明的函數可以訪問周圍函數的詞法范圍內的變量。

var initialBalance = 300 // Global Scopefunction withdraw (amount) {
 /**
 * Local Scope
 * Code here has access to anything declared in the global scope
 */
 var balance = parseInt(initialBalance) - parseInt(amount)
 const actualBalance = (function () {
 const TRANSACTIONCOST = 35
 return balance - TRANSACTIONCOST /**
 * Accesses balance variable from the lexical scope
 */
 })() // Immediately Invoked Function expression. IIFE
 // console.log(TRANSACTIONCOST) // ReferenceError: Can't find variable: TRANSACTIONCOST
 return actualBalance}

調用其封閉函數之外的內部函數，但仍然維護對其封閉函數(詞法范圍)中變量的訪問，從而創建一個javascript閉包。

function person () {
 var name = 'Paul' // Local variable
 var actions = {
 speak: function () {
 // new function scope
 console.log('My name is ', name) /**
 * Accessing the name variable from the outer function scope (lexical scope)
 */
 }
 } // actions object with a function
 return actions /**
 * We return the actions object
 * We then can invoke the speak function outside this scope
 */}person().speak() // Inner function invoked outside its lexical Scope

閉包允許我們公開接口，同時隱藏和保存外部范圍內的執行上下文。

一些javascript設計模式使用閉包。

模塊模式

其中一個很好實現的模式就是模塊模式，這個模式允許您模仿：私有、公共和特權成員。

var Module = (function () {
 var foo = 'foo' // Private Property
 function addToFoo (bam) { // Private Method
 foo = bam return foo }
 var publicInterface = {
 bar: function () { // Public Method
 return 'bar'
 },
 bam: function () { // Public Method
 return addToFoo('bam') // Invoking the private method
 }
 }
 return publicInterface // Object will contain public methods})()Module.bar() // barModule.bam() // bam

根據上面的模塊模式說明，只有返回對象中的公共方法和屬性可以在閉包的執行上下文之外使用。

所有私有成員仍然存在，因為它們的執行上下文保存但隱藏在外部范圍內。

關于閉包的更多插圖

當我們將函數傳遞到setTimeout或者任何類型的回調。由于閉包函數的作用，函數仍然記住詞法范圍。

function foo () {
 var bar = 'bar'
 setTimeout(function () {
 console.log(bar)
 }, 1000)}foo() // bar

閉包和循環

for (var i = 1; i <= 5; i++) {
 (function (i) {
 setTimeout(function () {
 console.log(i)
 }, i * 1000)
 })(i)}/**
* Prints 1 thorugh 5 after each second
* Closure enables us to remember the variable i
* An IIFE to pass in a new value of the variable i for each iteration
* IIFE (Immediately Invoked Function expression)
*/

for (let i = 1; i <= 5; i++) {
 (function (i) {
 setTimeout(function () {
 console.log(i)
 }, i * 1000)
 })(i)}/**
* Prints 1 through 5 after each second
* Closure enabling us to remember the variable i
* The let keyword rebinds the value of i for each iteration
*/

我打賭我們現在已經了解閉包了，并且可以做以下操作：

• 演示它的使用例或識別它在我們從未知道我們使用它的上下文中。
• 按照我們希望的情況維護執行上下文
• 在javascript模塊模式中實現代碼
• 使用閉包在我們的代碼中，清楚地理解

關注小編了解更多精彩內容，還可私信小編，領取精品的前端免費學習課程視頻，同時我將為您分享精品資料。