JavaScript閉包相關(guān)知識(shí)解析
閉包是JavaScript中的一個(gè)難點(diǎn),同時(shí)也是它的特色,JavaScript的很多高級(jí)應(yīng)用都要依靠閉包來(lái)實(shí)現(xiàn)。以下是我學(xué)習(xí)閉包的記錄,希望對(duì)你有些幫助。
變量作用域
在學(xué)習(xí)閉包之前,我們首先要理解JavaScript不同與其他語(yǔ)言獨(dú)特的變量作用域。在JavaScript中,不存在局部作用域的概念,但是有全局作用域以及函數(shù)作用域。全局作用域與其他語(yǔ)言的相同,沒(méi)有需要注意的地方,而函數(shù)作用域是指函數(shù)內(nèi)部聲明的變量在函數(shù)外部無(wú)法直接訪問(wèn)。
var a = 99;
function f1() {
console.log(a);
}
f1();
上面的代碼中,f1可以讀取到全局變量a,而下面的代碼中a無(wú)法被訪問(wèn)。
function f1() {
var a = 99;
}
console.log(a);
如何從外部讀取函數(shù)內(nèi)部聲明的變量?
在某些情況下,我們可能需要得到函數(shù)內(nèi)部的變量,正常情況下是無(wú)法做到的,因此需要用特殊的辦法。
function f1() {
var a = 99;
function f2() {
console.log(a);
}
}
上面代碼中,我們?cè)诤瘮?shù)f1中定義另一個(gè)函數(shù)f2,這樣f1中的所有變量對(duì)于f2來(lái)說(shuō)就是可見(jiàn)的,既然f2可以讀取到f1中的變量,那么我們只要把f2作為f1的返回值,我們就可以在f1的外部讀取到它內(nèi)部的變量了。
function f1() {
var a = 99;
function f2() {
console.log(a);
}
return f2;
}
var result = f1();
result();
此時(shí),就形成了一個(gè)簡(jiǎn)單的閉包。因此,閉包就可以簡(jiǎn)單的理解為函數(shù)中的函數(shù),而本質(zhì)上,閉包就是一個(gè)連接函數(shù)內(nèi)部和外部的橋梁。
閉包的特性
閉包會(huì)使得函數(shù)中的變量都被保存到內(nèi)存中。首先我們先看一下以下兩個(gè)例子
function A() {
var count = 0;
function B() {
count++;
console.log(count);
}
return B;
}
var C = A();
C(); // 1
C(); // 2
C(); // 3
count是函數(shù)A中的一個(gè)變量,它的值在函數(shù)B中被改變,函數(shù)B每執(zhí)行一次,count的值就在原來(lái)的基礎(chǔ)上累加1,因此,函數(shù)A中的count變量會(huì)一直保存在內(nèi)存中。
function A(x) {
function B(y) {
console.log(x+y);
}
return B;
}
var C = A(3);
C(5); //8
當(dāng)3傳入A函數(shù)后,B函數(shù)就會(huì)記住這個(gè)值,所以在后面?zhèn)魅?的時(shí)候只會(huì)對(duì)B函數(shù)中的y賦值,所以最后會(huì)輸出8。
使用閉包的注意點(diǎn)
由于上述閉包的特性,每次使用閉包都會(huì)大量增加內(nèi)存的消耗,所以不能濫用閉包,否則會(huì)影響網(wǎng)頁(yè)的性能。我們也可以在函數(shù)退出前,使函數(shù)內(nèi)變量指向null來(lái)手動(dòng)刪除變量。我們可以來(lái)看下一道經(jīng)典的面試題來(lái)理解。
function outer(){
var num = 0; //內(nèi)部變量
return function add() { //通過(guò)return返回add函數(shù),就可以在outer函數(shù)外訪問(wèn)了
num++; //內(nèi)部函數(shù)有引用,作為add函數(shù)的一部分了
console.log(num);
};
}
var func1 = outer();
func1(); //實(shí)際上是調(diào)用add函數(shù), 輸出1
func1(); //輸出2 因?yàn)閛uter函數(shù)內(nèi)部的私有作用域會(huì)一直被占用
var func2 = outer();
func2(); // 輸出1 每次重新引用函數(shù)的時(shí)候,閉包是全新的。
func2(); // 輸出2
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS閉包原理及其使用場(chǎng)景解析
- JavaScript 閉包的使用場(chǎng)景
- 深入了解JS之作用域和閉包
- JavaScript閉包原理與用法學(xué)習(xí)筆記
- JavaScript 函數(shù)用法詳解【函數(shù)定義、參數(shù)、綁定、作用域、閉包等】
- js 閉包深入理解與實(shí)例分析
- JS頁(yè)面獲取 session 值,作用域和閉包學(xué)習(xí)筆記
- 新手入門(mén)js閉包學(xué)習(xí)過(guò)程解析
- JS常見(jiàn)面試試題總結(jié)【去重、遍歷、閉包、繼承等】
- JS實(shí)現(xiàn)利用閉包判斷Dom元素和滾動(dòng)條的方向示例
- JS學(xué)習(xí)筆記之閉包小案例分析
- js核心基礎(chǔ)之閉包的應(yīng)用實(shí)例分析
- js閉包的9個(gè)使用場(chǎng)景
相關(guān)文章
layui動(dòng)態(tài)表頭的實(shí)現(xiàn)代碼
這篇文章主要介紹了layui動(dòng)態(tài)表頭的實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JS數(shù)組按指定字段轉(zhuǎn)map-list結(jié)構(gòu)(示例詳解)
在開(kāi)發(fā)過(guò)程中經(jīng)常會(huì)出現(xiàn)接口返回整個(gè)數(shù)組,我們需要將數(shù)組進(jìn)行二次處理,這篇文章主要介紹了js?數(shù)組按指定字段轉(zhuǎn)map-list結(jié)構(gòu),需要的朋友可以參考下2023-11-11
HTML元素拖拽功能實(shí)現(xiàn)的完整實(shí)例
這篇文章主要給大家介紹了關(guān)于HTML元素拖拽功能實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
cocos2dx+lua實(shí)現(xiàn)橡皮擦功能
這篇文章主要為大家詳細(xì)介紹了cocos2dx+lua實(shí)現(xiàn)橡皮擦功能,類(lèi)似刮刮樂(lè)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12
JavaScript實(shí)現(xiàn)打開(kāi)鏈接頁(yè)面的方式匯總
這篇文章主要介紹了JavaScript實(shí)現(xiàn)打開(kāi)鏈接頁(yè)面的方式,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
php結(jié)合js實(shí)現(xiàn)多條件組合查詢
這篇文章主要為大家詳細(xì)介紹了php結(jié)合js實(shí)現(xiàn)多條件組合查詢,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05

