輕松理解JavaScript閉包
摘要
閉包機(jī)制是JavaScript的重點(diǎn)和難點(diǎn),本文希望能幫助大家輕松的學(xué)習(xí)閉包
一、什么是閉包?
閉包就是可以訪問另一個函數(shù)作用域中變量的函數(shù)。
下面列舉出常見的閉包實現(xiàn)方式,以例子講解閉包概念
function f1(){ var n=999; nAdd=function(){n+=1} function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999 nAdd(); result(); // 1000
f1是f2的父函數(shù),而f2被賦給了一個全局變量(return的值),這導(dǎo)致f2始終在內(nèi)存中,而f2的存在依賴于f1,因此f1也始終在內(nèi)存中,不會在調(diào)用結(jié)束后,被垃圾回收機(jī)制(garbage collection)回收,這便形成了閉包。
因此,可以這么理解。閉包機(jī)制就是,如果A函數(shù)引用了另一個函數(shù)B的變量,但是B返回后A仍沒有返回,仍存在,因為A的引用,所以B的所有局部變量并不會隨B退出而注銷,會一直存在,直到A注銷。此時A就是閉包。
二、閉包的this指針
閉包通常在全局環(huán)境調(diào)用的,所以this通常指向window,具體情況還是需要視執(zhí)行環(huán)境而言,總之this指向執(zhí)行環(huán)境。
若需要閉包的this指向閉包的包含對象,則需要將包含對象的this作為變量傳進(jìn)閉包。
三、使用閉包的注意點(diǎn)
- 由于閉包會使得函數(shù)中的變量都被保存在內(nèi)存中,內(nèi)存消耗很大,所以不能濫用閉包,否則會造成網(wǎng)頁的性能問題,在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是,在退出函數(shù)之前,將不使用的局部變量全部刪除。
- 閉包會在父函數(shù)外部,改變父函數(shù)內(nèi)部變量的值。所以,如果你把父函數(shù)當(dāng)作對象(object)使用,把閉包當(dāng)作它的公用方法(Public Method),把內(nèi)部變量當(dāng)作它的私有屬性(private value),這時一定要小心,不要隨便改變父函數(shù)內(nèi)部變量的值。
四、解決一道閉包常見面試題
問題:
function onMyLoad(){ /* 拋出問題: 此題的目的是想每次點(diǎn)擊對應(yīng)目標(biāo)時彈出對應(yīng)的數(shù)字下標(biāo) 0~4,但實際是無論點(diǎn)擊哪個目標(biāo)都會彈出數(shù)字5 問題所在: arr 中的每一項的 onclick 均為一個函數(shù)實例(Function 對象),這個函數(shù)實例也產(chǎn)生了一個閉包域, 這個閉包域引用了外部閉包域的變量,其 function scope 的 closure 對象有個名為 i 的引用, 外部閉包域的私有變量內(nèi)容發(fā)生變化,內(nèi)部閉包域得到的值自然會發(fā)生改變 */ var arr = document.getElementsByTagName("p"); for(var i = 0; i < arr.length;i++){ arr[i].onclick = function(){ alert(i); } } }
解決方法
1、在外面再加一層函數(shù),將i作為函數(shù)參數(shù)傳進(jìn)來,這樣每次保存的是函數(shù)內(nèi)部的變量,與外部i不是同一個內(nèi)存空間,而每次調(diào)用函數(shù)都會生成一個局部變量,所以可以保證每次保存的值互不影響。
for(var i = 0; i<arr.length;i++){ arr[i].onclick = (function(arg){ return function () { alert(arg); } })(i); }
2、用ES6新特let,將for循環(huán)的var i改成let i,這樣當(dāng)前的i只在本輪循環(huán)有效,所以每一次循環(huán)的i其實都是一個新的變量。你可能會問,如果每一輪循環(huán)的變量i都是重新聲明的,那它怎么知道上一輪循環(huán)的值,從而計算出本輪循環(huán)的值?這是因為 JavaScript 引擎內(nèi)部會記住上一輪循環(huán)的值,初始化本輪的變量i時,就在上一輪循環(huán)的基礎(chǔ)上進(jìn)行計算。
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
- 通俗易懂地解釋JS中的閉包
- JS繼承與閉包及JS實現(xiàn)繼承的三種方式
- 淺談JavaScript作用域和閉包
- JS閉包的幾種常見形式實例詳解
- JS實現(xiàn)閉包中的沙箱模式示例
- JavaScript閉包的簡單應(yīng)用
- 通過示例徹底搞懂js閉包
- JavaScript閉包和回調(diào)詳解
- 淺談JS封閉函數(shù)、閉包、內(nèi)置對象
- JavaScript閉包_動力節(jié)點(diǎn)Java學(xué)院整理
- 深入理解Javascript中的作用域鏈和閉包
- JS閉包可被利用的常見場景小結(jié)
- 利用js的閉包原理做對象封裝及調(diào)用方法
- javascript閉包功能與用法實例分析
- JavaScript中閉包的詳解
- JS閉包用法實例分析
- 圖解Javascript——作用域、作用域鏈、閉包
- js中的閉包學(xué)習(xí)心得
相關(guān)文章
JavaScript數(shù)據(jù)類型轉(zhuǎn)換簡單方法舉例
JavaScript是一種無類型語言,但同時JavaScript提供了一種靈活的自動類型轉(zhuǎn)換的處理方式,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)據(jù)類型轉(zhuǎn)換的相關(guān)資料,需要的朋友可以參考下2023-12-12JavaScript實現(xiàn)阿拉伯?dāng)?shù)字和中文數(shù)字互相轉(zhuǎn)換
JavaScript實現(xiàn)阿拉伯?dāng)?shù)字和中文數(shù)字互相轉(zhuǎn)換可以用數(shù)組的循環(huán)檢測后的替換來實現(xiàn),下面主要講解其中的一些核心算法:2016-06-06Typescript模塊的導(dǎo)入導(dǎo)出與繼承方式
這篇文章主要介紹了Typescript模塊的導(dǎo)入導(dǎo)出與繼承方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09