js中的閉包

在上一篇文章“執行環境和作用域”中,我試著梳理了執行環境和作用域的關系。但實際上,文章中并沒有提到作用域,而是介紹了執行環境和作用域鏈。這里先把上篇文章的坑填了。

上篇文章的最后,我提了一個問題。這里把代碼稍微修改下,如下:

var name = 'window';

outer();

function outer(){
    var name = 'outer';
    inner();    //輸出什么?
}

function inner(){
    console.log(name);
}     

這段代碼很簡單,但很容易迷惑人。很多人可能會認為,應該輸出“outer”,但實際上結果確實“window”。這是為什么呢?

1、作用域和執行上下文的區別

作用域和執行上下是兩個不同的概念。執行上下文在上篇文章中已經解釋過了:在函數執行時創建。那么,作用域怎么理解呢?

作用域可以理解為一套規則,這套規則用來管理引擎如何在當前作用域以及嵌套的子作用域中根據標識符名稱進行變量查找。同執行環境一樣,作用域只有兩種(不考慮eval):全局作用域與函數作用域。

在js中代碼整個的執行分為兩個階段:代碼編譯和代碼執行。代碼編譯由編譯器完成,將代碼翻譯成可執行代碼。代碼執行由js引擎完成,主要任務是執行可執行的代碼。在代碼編譯階段,作用域規則就已經被確定了。到代碼執行時,執行上下文被創建,同時,作用域鏈作為作用域規則的具體實現被構建出來。過程如下圖:


0.jpg

再回頭去看開頭的問題,就不難理解了:在編譯階段,inner函數的相關的作用域規則就已經確定了,在而outer函數中執行時,只是具體地實現了相關的作用域的規則,也就是構建作用域鏈,而這個作用域鏈上面沒有outer函數執行環境相對應的變量對象,而是有全局執行環境對應的window對象,因此,結果是‘window’。

2、閉包

閉包在js高程中的解釋是:有權訪問另一個函數作用域中的變量的函數。簡單說就是,假設函數a是定義在函數b中的函數,那么函數a就是一個閉包。正常情況下,在函數的外部訪問不到函數內部的變量,但有了閉包就可以間接的實現訪問內部變量的需要。也就是說,閉包是連接函數內部和外部的橋梁。這就是閉包的第一個作用:訪問函數內部的變量。還有另外一個作用就是:讓被引用的變量值始終保持在內存中。

在上一篇文章中提到代碼當執行到一個函數時,會創建一個臨時的活動對象,并把這個對象作為變量對象推入環境棧中。當這個函數執行完的時候,這個對象就會出桟,并被銷毀。但當閉包中引用了函數中的變量時,那么,這個變量就會保存在內存中。也就是上面提到的閉包的第二個作用。之所以為這樣,是因為JavaScript的回收機制。

基本所有瀏覽器都是使用“標記清除”的方式回收內存。也就是說,當變量進入執行環境的時候(在函數中聲明一個變量),就給變量添加標記,而當函數執行完的,變量不再被引用的時候,再添加刪除的標記,垃圾收集器就會自動清楚這個變量占有的內存。但在閉包中引用了函數中的變量,而閉包又被當作結果返回時,閉包中的因為被引用就不會被清除。例如,下面的代碼:

function fn1(){
    var a = 1;
    return function(){
        console.log(++a);
    }

}

var fn2 = fn1();

fn2();      //輸出2

fn2();      //輸出3

在這段代碼中,fn1中的閉包函數被當作結果返回,在閉包中的引用的變量a因為被引用而沒有被清除,一直保存在內存當中,所以執行fn2的時候會輸出不斷增加的結果:2和3。

使用閉包時需要注意的問題

1、由于閉包會使得函數中被引用的變量一直保存在內存中,消耗內存,所以謹慎使用閉包,否則會造成網頁的性能問題。
2、閉包會改變父函數內部變量的值。如果父函數再次被執行的,而在外部已經執行過閉包修改變量的值,那么,這次執行的結果就會和上次的不一樣。

最后再來一段代碼,想下輸出的代碼,沒疑問的化,閉包的運行機制基本就掌握了:

var name = "window";

var obj = {
  name : "obj",
  getName : function(){
    return function(){
      return this.name;
    };
  }
};
  
console.log(obj.getName()());

寫在結尾:
如果覺得我寫的文章對你有幫助,歡迎掃碼關注我的公眾號:海痕筆記
微信號:haihenbiji


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

推薦閱讀更多精彩內容

  • 1. 定義 一個擁有許多變量和綁定了這些變量的環境的表達式(通常是一個函數), 因而這些變量也是該表達式的一部分....
    寒楓Alex閱讀 265評論 0 0
  • 閉包是JS中的一個重要的概念,在模塊封裝,保存變量中有著重要的作用,掌握閉包在前端開發中占著非常重要的角色。在了解...
    Bennt閱讀 337評論 0 2
  • 今天研究了一波js中的閉包,分享一下自己的理解。 一、變量的作用域 要理解閉包,首先必須理解Javascript特...
    阿布_0caf閱讀 250評論 0 2
  • 中國攝影勝地景點最適合的拍攝時間表 風光攝影最適合的時間:日出和日落的前后一小時 當照片光線復雜的時候,以次亮的地...
    后知后覺S閱讀 289評論 0 1
  • 杜派一個人坐在二層食堂的窗前,面前放著一廳可樂,玩弄著手機,春日的陽光打在這個少年的臉上,而他的臉卻沒有像窗外的桃...
    望穿天花板閱讀 433評論 0 0