讓我們一起來學(xué)習(xí)一下什么是javascript的閉包
什么是閉包: 閉包是一個存在內(nèi)部函數(shù)的引用關(guān)系。 該引用指向的是外部函數(shù)的局部變量對象(前提是內(nèi)部函數(shù)使用了外部函數(shù)的局部變量) 閉包的作用: 延長外部函數(shù)變量對象的生命周期 使用閉包能夠間接的從函數(shù)外部訪問函數(shù)內(nèi)部的私有變量
一、常見的閉包
function outer() { var a = 1 function inner() { console.log(a) //1 } inner() } outer()
二、實例詳解
function createFunc() { var result = new Array() for (var i = 0; i < 10; i++) { result[i] = function () { console.log(i) } } return result } var result = createFunc() result[0]() //10 result[1]() //10 result[2]() //10 result[3]() //10 result[4]() //10 result[5]() //10 result[6]() //10 result[7]() //10
首先在代碼執(zhí)行前,會先創(chuàng)建一個全局的對象,其中包含著全局的屬性,并且將其放入全局上下文作用域鏈頂端,并且也將其放入每一個函數(shù)的作用域鏈頂端。以這個例子為例。如圖所示
在初始化結(jié)束后,開始執(zhí)行代碼,此時就會創(chuàng)建一個新的對象,叫做Active Object,其中放入一些參數(shù),并且將其壓入createFunc函數(shù)的作用域鏈中。
因為在createFunc中仍然定義函數(shù)result[i]..,所以在執(zhí)行代碼前,該函數(shù)會形成作用域鏈。
此時開始執(zhí)行createFunc函數(shù),當(dāng)指向完畢后,createFunc中的作用域鏈表現(xiàn)為。如下圖所示。此時result為一個數(shù)組。并且Active object已經(jīng)從createFunc作用域鏈的頂部刪除。
此時開始執(zhí)行result[0](這里以result[0]為例,其他的一樣),此時執(zhí)行result[0]之前,應(yīng)該創(chuàng)建一個新的Active object
對象,將其放入result[0]
執(zhí)行作用域棧中。如圖所示
此時函數(shù)執(zhí)行中需要訪問i,但是在active object并不存在i,所以此時需要沿著作用域鏈進(jìn)行查找,在createFunc中找到i,并且i的值為10,所以最終打印的值都是10。在createFunc執(zhí)行完畢后,其創(chuàng)建的對象并沒有被垃圾回收掉,因為在result[0]中的i依然保持對該對象的引用。
這個例子的解決方法如下所示,就是設(shè)置一個立即執(zhí)行函數(shù),每一個下標(biāo)對應(yīng)的函數(shù),都是立即執(zhí)行函數(shù),當(dāng)立即執(zhí)行函數(shù)執(zhí)行時,每一個函數(shù)的上下文對象中都會存在為正確的下標(biāo)值。
function createFunc() { var result = new Array() for (var i = 0; i < 10; i++) { result[i] = (function (num) { return function() { console.log(num) } })(i) } return result } var result = createFunc() result[0]() //0 result[1]() //1 result[2]() //2 result[3]() //3 result[4]() //4 result[5]() //5 result[6]() //6 result[7]() //7
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
JavaScript 學(xué)習(xí)筆記之?dāng)?shù)據(jù)類型
javascript數(shù)據(jù)類型非常簡單,僅僅包含undefined、null、string、Boolean、number以及object,今天我們就針對這幾個數(shù)據(jù)類型,一一進(jìn)行講解,方便大家理解記憶2015-01-01script標(biāo)簽的 charset 屬性使用說明
如果外部文件中的字符編碼與主文件中的編碼方式不同,就要用到 charset 屬性。2010-12-12javascript中實現(xiàn)兼容JAVA的hashCode算法代碼分享
這篇文章主要介紹了javascript中實現(xiàn)兼容JAVA的hashCode算法代碼分享,實現(xiàn)跟JAVA中的運算結(jié)果一致,需要的朋友可以參考下2014-08-08深入理解JavaScript系列(33):設(shè)計模式之策略模式詳解
這篇文章主要介紹了深入理解JavaScript系列(33):設(shè)計模式之策略模式詳解,策略模式定義了算法家族,分別封裝起來,讓他們之間可以互相替換,此模式讓算法的變化不會影響到使用算法的客戶,需要的朋友可以參考下2015-03-03JavaScript函數(shù)、閉包、原型、面向?qū)ο髮W(xué)習(xí)筆記
這篇文章給大家分享了一篇關(guān)于JavaScript函數(shù)、閉包、原型、面向?qū)ο蟮闹R點學(xué)習(xí)筆記內(nèi)容,有興趣的朋友參考下。2018-09-09JavaScript基礎(chǔ)知識之?dāng)?shù)據(jù)類型
JavaScript中有5種簡單數(shù)據(jù)類型(也稱為基本數(shù)據(jù)類型):Undefined、Null、Boolean、Number和String。還有1種復(fù)雜數(shù)據(jù)類型——Object,Object本質(zhì)上是由一組無序的名值對組成的2012-08-08javascript學(xué)習(xí)筆記(五)原型和原型鏈詳解
許多人對JavaScript的原型及原型鏈仍感到困惑,網(wǎng)上的文章又大多長篇大論,令讀者不明覺厲。我將用最簡潔明了的文字介紹JavaScript的原型及原型鏈。2014-10-10