理解閉包

fox_soyoung 發(fā)布于2019-08-23 10:24 / 1245人閱讀

摘要：我的理解就是還處于被引用狀態(tài)。內(nèi)存機制的內(nèi)存空間分為棧堆其中棧存放變量，堆存放復(fù)雜對象。對堆內(nèi)數(shù)據(jù)進行復(fù)制修改時理解閉包有了前面的鋪墊，我們再來看看閉包是怎么回事。這種反常的現(xiàn)象我們就叫它，中文名閉包。這就是閉包形成的原因了。

知識小儲備

ECMAScript 的數(shù)據(jù)有兩種類型：基本類型值和引用類型值，基本類型指的是簡單的數(shù)據(jù)段，引用類型指的是可能由多個值構(gòu)成的對象。Undefined、Null、Boolean、Number 和 String 是值類型，其他都是引用類型。

垃圾回收

我們創(chuàng)建的原始類型、對象、函數(shù)等等，都會占用內(nèi)存。為了防止溢出，我們就需要對不用的數(shù)據(jù)進行刪除。這就是垃圾回收。

可觸及（Reachability）

JavaScript 內(nèi)存管理的關(guān)鍵概念是可觸及（Reachability）。
我的理解就是還處于被引用狀態(tài)。
將全局(無論是window還是global)比作樹根，我們創(chuàng)建的原始類型、對象、函數(shù)等等比作一個個枝杈。如果可以從window不斷層的知道某個變量，那這個變量就是可觸及的，不可回收的。

舉個例子：

// user has a reference to the object
let user = {
  name: "John"
};

箭頭代表的是對象引用。全局變量 "user" 引用了對象{name: "John"}（簡稱此對象為 John）。John 的 "name" 屬性儲存的是一個原始值，所以無其他引用。

如果覆蓋 user，對 John 的引用就丟失了：

user = null;

現(xiàn)在 John 變得不可觸及，垃圾回收機制會將其刪除并釋放內(nèi)存。

內(nèi)存機制

js的內(nèi)存空間分為棧 (stack)、堆 (heap)；其中棧存放變量，堆存放復(fù)雜對象。
借用一張圖直觀感受一下

棧內(nèi)存

只能存放基本數(shù)據(jù)類型的數(shù)據(jù)和對象類型的引用地址也叫哈希碼。里面的數(shù)據(jù)后進先出。
對棧內(nèi)數(shù)據(jù)進行復(fù)制修改時：

堆內(nèi)存

是用來存儲 “數(shù)組類型” 和“對象類”的數(shù)據(jù)。特點是存儲空間大。
對堆內(nèi)數(shù)據(jù)進行復(fù)制修改時：

理解閉包

有了前面的鋪墊，我們再來看看閉包是怎么回事。還是舉個例子：

//決策層開會決定生產(chǎn)新一代phone手機，就弄了個叫PhoneFactory的企劃案
let Proposal = function(){
    //新一代手機信息被封裝在企劃案中
    let  version = "XX", money = 10000
    return function (){
        //生產(chǎn)新的手機
        return {
            version: version,
            money: money
        }
    }
}
//執(zhí)行者根據(jù)策劃案建成了一個工廠, 工廠方法每執(zhí)行一次就產(chǎn)出一個手機
let Factory = new Proposal();
let phone1 = Factory();
console.log(phone1.version)

對于手機的version， money而言, 它是策劃書Proposal的內(nèi)部變量，而Proposal的同級phone1應(yīng)該是訪問不到。但實際上我們還是拿到了手機的版本和價格數(shù)據(jù)。這種反常的現(xiàn)象我們就叫它Closure，中文名閉包。

原因

我們不管它為什么叫這個名字，先看看具體是什么原因產(chǎn)生的。
根據(jù)上面說的垃圾回收機制。函數(shù)Proposal在執(zhí)行過之后（第16行）就沒有引用。那么Proposal久應(yīng)該被回收。里面的所有內(nèi)部變量也應(yīng)該被回收了。
但實際上 Proposal返回了一個新的函數(shù)Factory。而這個Factory是要能夠訪問到它生成時的同級以及父祖輩變量。而Proposal內(nèi)部變量version, money就有了新的引用。因而阻止了被回收。就像Factory生成了一個新的泡泡把它能訪問到的作用域包裹了起來。這就是閉包形成的原因了。

基于上面的js內(nèi)存機制的知識，我們可以畫出下面這張圖：

圖簡陋了點。。。。
但也可以看出，對于變量version,money而言。雖然他們本身在proposal的黃色作用域中。但也在fatory生成的時候也被包含在了fatory打的可訪問的作用域氣泡內(nèi)。不僅他們，甚至更外層的也都被包含在內(nèi)。
在proposal這個泡泡破碎之后，只有當(dāng)打的紅色泡泡也破了，這些變量才會真的被回收。這也是為什么閉包用多了會影響性能的原因。

引用：

前端基礎(chǔ)進階：詳細(xì)圖解 JavaScript 內(nèi)存空間
垃圾回收