讓我們一起來學(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開發(fā)技術(shù)大全 第2章 開始JAVAScript之旅
1st JavaScript Editor ,除了有著色處,還有html標(biāo)簽、屬性、javascript事件、函數(shù),另外還可調(diào)用外部編輯來編輯網(wǎng)頁,也可將常用瀏覽器內(nèi)置在窗口中。2011-07-07
JavaScript中splice與slice的區(qū)別
本文給大家分享的是JavaScript中的splice和slice的用法和區(qū)別,slice()方法和splice()方法都是原生js中對數(shù)組操作的方法,下面我們來詳細(xì)探討下2017-05-05
JavaScript中Number.MAX_VALUE屬性的使用方法
這篇文章主要介紹了JavaScript中Number.MAX_VALUE屬性的使用方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
javascript 基礎(chǔ)篇1 什么是js 建立第一個js程序
javascript是很多東西的基礎(chǔ),比如jsp,ajax等,如果不會這么,那么學(xué)起這些來就比較麻煩,所以要先學(xué)好這個,為將來的學(xué)習(xí)打好經(jīng)濟(jì)基礎(chǔ)2012-03-03

