js 閉包

閉包的理解

因為內部函數在被創建時,其作用域鏈對外部函數對應的變量對象存在一個引用,而JS采用引用計數的方法進行內存管理,所以當外部函數被執行完畢后,其對應的變量對象不會被回收,這樣就發生了閉包,在外部函數執行完畢后,我們在內部函數中仍然可以訪問外部函數作用域中的變量。
閉包就是函數的局部變量集合,只是這些局部變量在函數返回后會繼續存在。

閉包就是就是函數的“堆棧”在函數返回后并不釋放,我們也可以理解為這些函數堆棧并不在棧上分配而是在堆上分配,當在一個函數內定義另外一個函數就會產生閉包而當一個函數中的變量或者函數有權訪問另一個函數作用域中的變量或者函數時就產生了閉包了

嵌套的函數定義

我們只能通過變通的辦法來訪問函數的局部變量,一般來說,這個變通的辦法就是在函數內部再定義一個函數,因為一個函數不僅可以訪問全局變量,還可以訪問它的外部函數(Outer function)定義的局部變量,比如下面的代碼:

var global_var = "I'm global";
function outer() {
    var local_var = "I'm local";
    return function inner() {
        console.log("local: " + local_var);
    }; 
}
outer()(); // 輸出:local: I'm local

函數 inner 不僅有自己的內部作用域,還可以訪問全局變量,也可以訪問它外部的 outer 函數定義的所有局部變量。我們知道函數是 JavaScript 的一等公民,可以作為其他函數的參數或者作為函數的返回值,這里我們把 inner 函數返回,這樣我們就通過變通的方法在 outer 函數外部訪問了 outer 函數內部定義的局部變量。那這里的內部函數 inner 就構成了閉包。在 JavaScript 語言中,閉包的定義可以簡化為嵌套定義在函數內部的函數。

instanceof和typeof都能用來判斷一個變量是否為空或是什么類型的變量。typeof用以獲取一個變量的類型,typeof一般只能返回如下幾個結果:number,boolean,string,function,object,undefined。我們可以使用typeof來獲取一個變量是否存在,如if(typeof a!="undefined"){},而不要去使用if(a)因為如果a不存在(未聲明)則會出錯,對于Array,Null等特殊對象使用typeof一律返回object,這正是typeof的局限性。

  function f1(){
    var n=999;
    nAdd=function(){n+=1}
    function f2(){
      alert(n);
    }
    return f2;
  }
  var result=f1();
  result(); // 999
  nAdd();
  result(); // 1000

在這段代碼中,result實際上就是閉包f2函數。它一共運行了兩次,第一次的值是999,第二次的值是1000。這證明了,函數f1中的局部變量n一直保存在內存中,并沒有在f1調用后被自動清除。

為什么會這樣呢?原因就在于f1是f2的父函數,而f2被賦給了一個全局變量,這導致f2始終在內存中,而f2的存在依賴于f1,因此f1也始終在內存中,不會在調用結束后,被垃圾回收機制(garbage collection)回收。
這段代碼中另一個值得注意的地方,就是"nAdd=function(){n+=1}"這一行,首先在nAdd前面沒有使用var關鍵字,因此nAdd是一個全局變量,而不是局部變量。其次,nAdd的值是一個匿名函數(anonymous function),而這個匿名函數本身也是一個閉包,所以nAdd相當于是一個setter,可以在函數外部對函數內部的局部變量進行操作。

立即執行函數

立即執行函數能配合閉包保存狀態。
像普通的函數傳參一樣,立即執行函數也能傳參數。如果在函數內部再定義一個函數,而里面的那個函數能引用外部的變量和參數(閉包),利用這一點,我們能使用立即執行函數鎖住變量保存狀態。

// 并不會像你想象那樣的執行,因為i的值沒有被鎖住
// 當我們點擊鏈接的時候,其實for循環已經執行完了
// 于是在點擊的時候i的值其實已經是elems.length了
var elems = document.getElementsByTagName( 'a' );

for ( var i = 0; i < elems.length; i++ ) {

  elems[ i ].addEventListener( 'click', function(e){
    e.preventDefault();
    alert( 'I am link #' + i );
  }, 'false' );

}


// 這次我們得到了想要的結果
// 因為在立即執行函數內部,i的值傳給了lockedIndex,并且被鎖在內存中
// 盡管for循環結束后i的值已經改變,但是立即執行函數內部lockedIndex的值并不會改變
var elems = document.getElementsByTagName( 'a' );

for ( var i = 0; i < elems.length; i++ ) {

  (function( lockedInIndex ){

    elems[ i ].addEventListener( 'click', function(e){
      e.preventDefault();
      alert( 'I am link #' + lockedInIndex );
    }, 'false' );

  })( i );

}

內存泄露

function assignHandler() {
    var el = document.getElementById('demo');
    el.onclick = function() {
        console.log(el.id);
    }
}
assignHandler();

以上代碼創建了作為el元素事件處理程序的閉包,而這個閉包又創建了一個循環引用,只要匿名函數存在,el的引用數至少為1,因些它所占用的內存就永完不會被回收。

function assignHandler() {
    var el = document.getElementById('demo');
    var id = el.id;

    el.onclick = function() {
        console.log(id);
    }

    el = null;
}
assignHandler();

把變量el設置null能夠解除DOM對象的引用,確保正常回收其占用內存。

function fun(n,o) {
  console.log(o)
  return {
    fun:function(m){
      return fun(m,n);
    }
  };
}
var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1);  c.fun(2);  c.fun(3);//undefined,?,?,?

//問:三行a,b,c的輸出分別是什么?
//這是一道非常典型的JS閉包問題。其中嵌套了三層fun函數,搞清楚每層fun的函數是那個fun函數尤為重要。
//答案: //a: undefined,0,0,0 //b: undefined,0,1,2 //c: undefined,0,1,1

JavaScript的執行上下文生成之后,會創建一個叫做變量對象的特殊對象(具體會在下一篇文章與執行上下文一起總結),JavaScript的基礎數據類型往往都會保存在變量對象中。

嚴格意義上來說,變量對象也是存放于堆內存中,但是由于變量對象的特殊職能,我們在理解時仍然需要將其于堆內存區分開來。
基礎數據類型都是一些簡單的數據段,JavaScript中有5中基礎數據類型,分別是Undefined、Null、Boolean、Number、String。基礎數據類型都是按值訪問,因為我們可以直接操作保存在變量中的實際的值。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,250評論 6 530
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 97,923評論 3 413
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,041評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,475評論 1 308
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,253評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,801評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,882評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,023評論 0 285
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,530評論 1 331
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,494評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,639評論 1 366
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,177評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,890評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,289評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,552評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,242評論 3 389
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,626評論 2 370

推薦閱讀更多精彩內容

  • 閉包(closure)是Javascript語言的一個難點,也是它的特色,很多高級應用都要依靠閉包實現。 一、變量...
    zock閱讀 1,078評論 2 6
  • 一、變量的作用域要理解閉包,首先必須理解Javascript特殊的變量作用域。變量的作用域無非就是兩種:全局變量和...
    Bigbang_boy閱讀 181評論 0 0
  • 一.變量的作用域 要理解閉包,首先必須理解JavaScript特殊的變量作用域。 作用域無非就是兩種:全局作用域和...
    倔強的仙人掌閱讀 163評論 0 0
  • 閉包(closure)是Javascript語言的一個難點,也是它的特色,很多高級應用都要依靠閉包實現。 要理解閉...
    青春前行閱讀 282評論 0 0
  • 1 概述 負載均衡集群設計時要注意兩點:一是否需要會話保持;二是否需要共享存儲,共享存儲分為NAS,SAN,DS(...
    ghbsunny閱讀 1,550評論 0 0