? 今天呢咱們來聊聊這個js閉包,我們基本上在面試中,必然會問到的問題:什么是閉包?說說你對閉包的理解.閉包的作用是什么?
? 閉包也是一個很不好理解的概念,往往我們遇到的機會很多很多,很多朋友呢都說了對閉包的理解,問題表達的方式不一樣,但是呢,最后都對閉包沒有很清晰的理解.所以呢我這邊就幫助大家理解什么是閉包.其實說起來,可以深,也可以淺.先由淺著說.之前呢,在網上也是找了不少的資料,看見人家理解的閉包,我提取出了說法有問題 的4點:
? 1.閉包是指有權訪問另一個函式作用域中變數(引數)的函式(不可取)
? 2.閉包就是能讀取其他函式內部變數的函式(不可取)
? 3.閉包可以理解成定義一個函式內部的函式(不可取)
? 4.函式就是閉包(不可取)
? 這4點呢,其實呢,怎么說呢,不能否認它是錯的,只能說不嚴謹,第一點,可以得到一個結論,閉包是一個函式,第二點也差不多的意思,第三點有意思了,定義一個函式內部的函式,的確有這個特征,而第四點,其實也是對的,因為MDN上的解釋是:閉包是一個特殊的函式物件.那上面的幾種說法都是不嚴謹的,其實最終我查詢資料,都歸納了一句話:
? 當一個函式能夠記住并訪問到其所在的詞法作用域及作用域鏈,特別強調是在其定義的作用域外進行的訪問,此時該函式和其上層執行背景關系共同構成閉包
? 怎么理解這句話呢,其中包含兩個新的名詞,詞法作用域及作用域鏈,這個我們擴展再說,這里我們直接當做作用域就行了,所以這里就可以知道,閉包肯定是跟作用域有關的,而且作用域還是很大的.然后下一句是在其定義的作用域外進行的訪問.這是上面4點都沒有講到的.然后再就是該函式,也就是內部函式和其上層執行的背景關系,共同構成閉包,所以閉包是一個整體.說了這么多還是很抽象,那需要明確下列幾點:
? 1.閉包一定是函式物件
? 2.函式內保持對上層作用域的參考
? 3.閉包和詞法作用域,作用域鏈,垃圾回識訓制等息息相關
? 4.當函式在其定義的作用域外進行訪問時,才產生閉包
? 5.閉包是由該函式和其上層執行背景關系共同構成
//閉包函式物件
function fn() {
var a = 3;
return function () {
return ++a;//參考了fn下的a 保持對變數a的參考(上層作用域)的參考
}
}
//fn和其中的匿名函式共同構成
var res=fn();
res();//在外部進行訪問,形成閉包
? 上述標重點的才是閉包的必要條件.所以呢,日后面試官問起,什么閉包,我可以這樣說:我們通常所用的閉包是函式嵌套函式的形式,內部的那個函式通過return出來,然后內部的函式又保持對上層作用域的參考,而且內部函式還必須要在外部呼叫,這個時候整個結構,內部外部結構,整個就形成了閉包 這里僅僅只是說的閉包的概念和理解,那具體有什么作用呢,上代碼先
function Fn(){
var i=0;
i++;
alert(i);
}
Fn();//1
Fn();//1
Fn();//1
var i=10;//并不會污染函式內部的變數
function outerFn() {
var i = 0;
return function () {
i++;
console.log(i);
}
}
var res = outerFn();//res指向回傳的函式
res();//1
res();//2
res();//3
//瀏覽器運行結果可以得出結論:可以操作outerFn函式內部的變數
這兩段代碼對比一下,第一段代碼因為作用域和函式生命周期的關系,定義在fn函式中的變數i在呼叫完畢之后,就被垃圾回識訓制給回收了,所以每次呼叫都是等于1,而第二段代碼,咱們可以在函式外包操作outerFn函式內部的變數,所以每次呼叫執行res(),都相當于改變了i的值,并沒有被垃圾回識訓制給回收.這2個示例體現了什么呢,就是我們要講的閉包的2點應用
1.在函式外讀取函式內部的變數(避免全域變數的污染)
2.讓區域變數的值能夠被保存下來(可以讓變數常駐記憶體)
3.將模塊的公有屬性和方法暴露出來
第三點應用是下面要講的,為的是把閉包的作用總結在一起,方便大家理解,那咱們來看第三點,體現在什么地方呢
//模塊化寫法
var moduleB = (function () {
var num = 100;//私有屬性
var rem = 200;//公有屬性
function add() {//公有方法
num++;
console.log(num);
}
function divide() {//公有方法
num = num / 10;
console.log(num);
}
function show(){ //私有方法
console.log(num);
}
//將需要暴露出去的屬性和方法return出去
return {
add: add,
divide: divide,
rem: rem
}
})();
moduleB.add();//101
moduleB.divide();//10.1
moduleB.show();//moduleB.show is not a function
console.log(moduleB.rem);//200
? 那如果問你,咱們平時閉包的應用還有哪些呢,很多人說用的很少,乃至沒有,其實閉包離我們很近,只是我們沒有去發現它是閉包而已.比如很多事實咱們習慣將js代碼寫在頭部,那就肯定會寫一個頁面檔案加載的事件,來,看代碼說話:
window.onload=function(){
var oDiv=document.querySelector("div");
oDiv.onclick=function(){
alert(123);
}
}
這段代碼咱們是不是很熟悉,是不是很普通,這代碼是基本每天都寫得,我可以肯定的告訴大家,這里咱們就寫了個閉包!說是閉包,那符合咱們上面說的閉包的3點條件嗎,3點條件大家再回頭看一下:
1.函式內保持對上層作用域的參考
2.當函式在其定義的作用域外進行訪問時,才產生閉包
3.閉包是由該函式和其上層執行背景關系共同構成
那問題來了有人說第一點就不符合,那里來的對上層作用域的參考呢?其實大家忘了,這個onclick事件函式內部有一個隱式的參考,不管用不用,它就在那里,沒錯,就是this,這個this的指向是oDiv,而oDiv的確是上層作用域的變數.那第二點,當函式在其定義的作用域外進行訪問,產生閉包,咱們的onclick事件是不是全域事件啊,觸發這個事件也是相當于在全域呼叫了.第三點,onload事件和onclick的事件,這一個整體,是不是也符合了咱們的內部函式和其上層執行背景關系共同構成的條件.所有呢,閉包是不是離咱們很近,其實這個函式會在以前的低版本IE上,會有很大的問題,因為閉包可以讓變數常駐記憶體,會造成記憶體泄露,現在高版本瀏覽器會有它自己的釋放方法.如果讓咱們自己釋放怎么釋放呢
釋放記憶體:
//閉包會造成記憶體泄露的問題,所以頁面在解構的時候,直接清除
window.onunload = function () {
oDiv = null;
oDiv.onclick=null;
}
還有一個應用,比如頁面上的ul標簽,里面有很多個li,咱們在獲取當前點擊的li的下標的時候,運用閉包會遇到,有人說用什么閉包啊,事件委托啊,但是事件委托真的可以獲取下標嗎,答案是不可以的.看代碼:
var oLis = document.querySelectorAll("ul li");
for (var i = 0; i < oLis.length; i++) {
//自執行函式
(function (i) { // i形參
oLis[i].onclick = function () {
console.log(i);//點擊li,輸出當前li的下標
}
})(i);//實參
}
//閉包會造成記憶體泄露的問題,所以頁面在解構的時候,直接清除
window.onunload = function () {
oLis = null;
}
? 這也是一個閉包.所以呢,我們是經常在寫閉包的,只不過是自己沒有注意罷了,以后面試別說自己沒有寫過閉包,因為這是不可能的.通過上面我們對閉包的探究,那可以給大家總結一下,閉包就是可以創建一個獨立的環境，每個閉包里面的環境都是獨立的，互不干擾，閉包會發生記憶體泄漏，每次外部函式執行的時 候，外部函式的參考地址不同，都會重新創建一個新的地址，但凡是當前活動物件中有被內部子集參考的資料，那么這個時候，這個資料不洗掉，保留一根指標給內部活動物件，下面幾個閉包的例子,大家可以看一下,仔細琢磨代碼:
注意,此示例和結論參考 https://blog.csdn.net/weixin_43586120/article/details/89456183 的示例,里面示例更多,有興趣可以去琢磨,看完下面示例之后,可以帶入這個結論,說的很正確.結論閉包找到的是同一地址中父級函式中對應變數最終的值
function outerFn(){
var i = 0;
function innerFn(){
i++;
console.log(i);
}
return innerFn;
}
var inner = outerFn(); //每次外部函式執行的時候，外部函式的地址不同，都會重新創建一個新的地址
inner();
inner();
inner();
var inner2 = outerFn();//重新創建了一個新的參考地址
inner2();
inner2();
inner2()
//結果是 1 2 3 1 2 3
var i = 0;
function outerFn(){
function innnerFn(){
i++;
console.log(i);
}
return innnerFn;
}
var inner1 = outerFn();
var inner2 = outerFn();
inner1();
inner2();
inner1();
inner2();
//結果是 1 2 3 4 i是全域的變數,改的是全域變數
(function() {
var m = 0;
function getM() { return m; }
function seta(val) { m = val; }
window.g = getM;
window.f = seta;
})();
f(100);
console.info(g()); //100 閉包找到的是同一地址中父級函式中對應變數最終的值
function love1(){
var num = 223;
var me1 = function() {
console.log(num);
}
num++;
return me1;
}
var loveme1 = love1();
loveme1(); //輸出224 這里作用域內var變數進行了宣告提升,在累加之前,函式未呼叫
擴展:
上面呢,咱們說了兩個概念,詞法作用域和作用域鏈,作用域鏈呢咱們這里不講,挖的深了就很多了,不易理解,我這里簡單的擴展下詞法作用域,詞法作用域也叫靜態作用域,它的作用域是指在詞法分析階段就確定了,不會改變,咱們的JavaScript就是使用的詞法作用域.看個例子:
//詞法作用域
var abc=1;//全域
function fn(){
console.log(abc);//這里注定是呼叫的全域的變數abc
}
function fx(){
var abc=2;//fn函式無法訪問到這里的abc
fn();
}
fx();
? 看上面,很普通的一段代碼,咱們上面講了閉包,肯定很多人以為這個答案會輸出2,但其實我告訴你,這個答案是輸出1,為什么呢,這個就跟詞法作用域有關.詞法作用域(靜態作用域)有很重要的一條,詞法作用域關注函式在何處宣告.好好想想,第一個abc是全域的,下面函式fn是直接列印的abc,那你認為fn中的abc會去能訪問到fx函式中的變數a嗎,肯定不是.當然了,如果你給fn函式把abc當做一個形參傳遞,那肯定是可以訪問到abc的值的,會列印2.,這就是詞法作用域,關注函式在何處宣告.
? 那好,既然有靜態作用域,那肯定有動態的作用域,
? 動態作用域是在運行時根據程式的流程資訊來動態確定的,而不是在寫代碼時靜態確定的.那說到這里,咱們js中有那塊非常類似這個動態作用域呢?沒錯,就是this,上代碼,看著更直觀點
function fx(){
console.log(this);//根據呼叫fx情況來指向哪里
}
fx();//此時this 是指向window的
//頁面上有個按鈕,獲取btn
oBtn.onclick=function(){
console.log(this);//這里的this就是指向按鈕oBtn了
fx();
}
//這個就是類似的動態作用域
? 動態作用域關注的是函式從何處呼叫,詞法作用域和動態作用域的主要區別就是:詞法作用域是在寫代碼或者定時確定的,而動態作用域是在運行時確定的.
? 好了,閉包的基本知識就講到這里了,這是從淺處去挖,還沒有到深處,各位大神有興趣,可以評論區指教下,后面的詞法作用域和動態作用域,當做是擴展的了,希望大家能明白.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/143977.html
標籤：JavaScript