首頁 > 文章 > web前端 > JS中的閉包簡單解釋

JS中的閉包簡單解釋

小云云原創: 2018-01-04 09:30:371453瀏覽

大家都題聽說過JS中的閉包，本文透過範例程式碼給大家介紹了js中的閉包，非常不錯，具有參考借鑒價值，有興趣的朋友一起看看吧，希望能幫助到大家。

1. "閉包就是跨作用域存取變數。"

【範例一】

var name = 'wangxi'
function user () {
 // var name = 'wangxi'
 function getName () {
 console.log(name)
 }
 getName()
}
user() // wangxi

在getName 函數中取得name，首先在getName 函數的作用域中查找name，未找到，進而在user 函數的作用域中查找，同樣未找到，繼續向上回溯，發現在全域作用域中存在name，因此取得name 值並列印。這裡很好理解，即變數都存在在指定的作用域中，如果在當前作用中找不到想要的變量，則透過作用域鏈向在父作用域中繼續查找，直到找到第一個同名的變數為止（或找不到，拋出ReferenceError 錯誤）。這是 js 中作用域鏈的概念，即子作用域可以根據作用域鏈存取父作用域中的變量，那如果相反呢，在父作用域想訪問子作用域中的變量呢？ ——這就需要透過閉包來實現。

【範例二】

function user () {
 var name = 'wangxi'
 return function getName () {
 return name
 }
}
var userName = user()()
console.log(userName) // wangxi

分析程式碼我們知道，name 是存在於user 函數作用域內的局部變量，正常情況下，在外部作用域（這裡是全域）中是無法存取到name 變數的，但透過閉包（傳回一個包含變數的函數，這裡是getName 函數），可以實現跨作用域存取變數了（外部存取內部）。因此上面的這種說法完整的應該理解為：

閉包就是跨作用域存取變數－內部作用域可以保持對外部作用域中變數的引用從而使得（更）外部作用域可以存取內部作用域中的變數。（還是不理解的話看下一條分析）

2. "閉包：在爺爺的環境中執行了爸爸，爸爸中返回了孫子，本來爸爸被執行完了，爸爸的環境應該被清除掉，但是孫子引用了爸爸的環境，導致爸爸釋放不了。物件。首先看下方程式碼：

【範例三】

function user () {
 var name = 'wangxi'
 return name
}
var userName = user()
console.log(userName) // wangxi

問：這是閉包嗎？

答：當然不是。首先要明白閉包是什麼。雖然這裡形式上看起來好像也是在全域作用域下存取了user 函數內的局部變數name，但是問題是，user 執行完，name 也隨之被銷毀了，即函數內的局部變數的生命週期僅存在於函數的宣告週期內，函數被銷毀，函數內的變數也自動被銷毀。

但是使用閉包就相反，函數執行完，生命週期結束，但是透過閉包引用的外層作用域內的變數依然存在，並且將一直存在，直到執行閉包的的作用域被銷毀，這裡的局部變數才會被銷毀（如果在全域環境下引用了閉包，則只有在全域環境被銷毀，例如程式結束、瀏覽器關閉等行為時才會銷毀閉包引用的作用域）。因此為了避免閉包造成的記憶體損耗，建議使用閉包後手動銷毀。還是上面範例二的例子，稍作修改：

【範例四】

function user () {
 var name = 'wangxi'
 return function getName () {
 return name
 }
}
var userName = user()() // userName 变量中始终保持着对 name 的引用
console.log(userName) // wangxi
userName = null // 销毁闭包，释放内存

【為什麼user()() 是兩個括號：執行user() 回傳的是getName 函數，要獲得name 變量，需要對傳回的getName 函數執行一次，所以是user()()】

#根據觀點2，分析程式碼：在全域作用域下創建了userName 變數（爺爺），保存了對user 函數最終返回結果的引用（即局部變數name 的值），執行user()()（爸爸），返回了name（孫子）,正常情況下，在執行了user()() 之後， user 的環境（爸爸）應該被清除掉，但是因為返回的結果name（孫子）引用了爸爸的環境（因為name 本來就是存在於user 的作用域內的），導致user 的環境無法被釋放（會造成內存損耗）。

那麼【"閉包就是一個引用了父環境的對象，並且從父環境中返回到更高層的環境中的一個對象。"】如何理解？

我們換個說法：如果一個函數引用了父環境中的對象，並且在這個函數中把這個對象返回到了更高層的環境中，那麼，這個函數就是閉包。

還是看上面的範例：

getName 函數中引用了user（父）環境中的物件（變數name），並且在函數中把name 變數傳回了全域環境（更高層的環境）中，因此，getName 就是閉包。

3. "JavaScript中的函數運行在它們被定義的作用域裡，而不是它們被執行的作用域裡."

這句話對閉包中對變數的引用的理解很有幫助。我們看下面的範例：

var name = 'Schopenhauer'
function getName () {
 console.log(name)
}
function myName () {
 var name = 'wangxi'
 getName()
}
myName() // Schopenhauer

如果執行myName() 輸出的結果和你想像的不一樣，你就要再回去看看上面說的這句話了，

JavaScript中的函數運行在它們被定義的作用域裡，而不是它們被執行的作用域裡

执行 myName，函数内部执行了 getName，而 getName 是在全局环境下定义的，因此尽管在 myName 中定义了变量 name，对getName 的执行并无影响，getName 中打印的依然是全局作用域下的 name。

我们稍微改一下代码:

var name = 'Schopenhauer'
function getName () {
　 var name = 'Aristotle'
 var intro = function() { // 这是一个闭包
  console.log('I am ' + name)
 }
 return intro
}
function showMyName () {
 var name = 'wangxi'
 var myName = getName()
 myName()
}
showMyName() // I am Aristotle

结果和你想象的一样吗？结果留作聪明的你自己分析~

以上就是对 js 中闭包的理解，如果有误，欢迎指正。最后引用一段知乎问题下关于闭包概念的一个回答。

什么是闭包?

简单来说，闭包是指可以访问另一个函数作用域变量的函数，一般是定义在外层函数中的内层函数。

为什么需要闭包？

局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。

特点

占用更多内存
不容易被释放

何时使用？

变量既想反复使用，又想避免全局污染

如何使用？

定义外层函数，封装被保护的局部变量。
定义内层函数，执行对外部函数变量的操作。
外层函数返回内层函数的对象，并且外层函数被调用，结果保存在一个全局的变量中。

JS中的閉包簡單解釋

相關文章