深刻理解javascript系列(七):閉包(1)

閉包（Closures）是我學習過程當中的一個瓶頸。

沒有跨不過去的坎,只有走不出的心。

7.1  概念

閉包是一種特殊的現象。

它由兩部分組成=>執行上下文（A），以及在該執行上下文中建立的函數（B）。

當B執行時，若是訪問了A的變量對象中的值，那麼閉包就會產生。

許多書籍、文章裏都以函數B的名字指代這裏生成的閉包。而在Chrome中，則以執行上下文A的函數名代指閉包。

咱們只需知道，一個閉包對象，有A、B共同組成，在之後的篇幅中，都將以Chrome的標準來稱呼。

//demo01.js
function foo() {
    var a = 20;
    var b = 30;
    
    function bar() {
        return a + b;
    }
    return bar;
}
var bar = foo();
bar();複製代碼

在上面的例子中，首先執行上下文foo，在foo中定義了函數bar，然後經過對外放回bar的方式，得以讓bar執行。當bar執行時，訪問了foo內部的變量a和b。所以這個時候閉包就產生了。

在Chrome中經過斷點調試的方式能夠逐步分析該過程，從下圖中能夠看出，此時閉包的產生，用foo代指。

在圖中，箭頭所指的正式閉包。其中Call Stack爲當前的函數調用棧，Scope爲當前正在被執行函數的做用域鏈，Local爲當前活動對象（AO）。

在學習了閉包的基礎概念後，下面就來驗證一下你是否真的理解了。如今思考一個小問題，把上面的代碼稍做改動，是否造成閉包了？

//demo02.js
function foo() {
    var a = 20;
    var b = 30;
    
    function bar() {
        return a + b;
    }
    bar();
}
foo();複製代碼

仍然是foo中定義的bar函數在執行時訪問了foo中的變量，所以這個時候仍然會造成閉包。如圖所示：

在來看一個很是有意思的例子。

//demo03.js
function add(x) {
    return function _add(y) {
        return x + y;
    }
}
add(2)(3);複製代碼

對於這個既熟悉又陌生的函數，他有閉包產生嗎？

固然有。當內部函數_add被返回調用時，訪問了add函數變量對象中的x，這個時候，閉包就會產生，以下圖所示。必定要記住，函數參數中的變量傳遞給函數以後也會加到變量對象中。

還有一個例子能夠驗證你們對於閉包的理解。

看看下面這段代碼中是否有閉包產生。

//demo04.js
var name = 'window';

var p = {
    name: 'pan',
    getName: function() {
        return function() {
            return this.name;
        }
    }
}
var getName = p.getName();
var _name = getName();
console.log(_name);

複製代碼

getName在執行的時候，其this是指向window對象的，而這個時候並無造成閉包的環境，所以這個例子沒有閉包。

那麼若是按照下面的方式進行改動呢？

//改動一
//demo05.js
var name = "window";

var p = {
    name: 'pan',
    getName: function() {
        return function() {
            return this.name;
        }
    }
}

var getName = p.getName();

var _name = getName.call(p);    //利用call的方式改變其this指向

console.log(_name);

複製代碼

//改動二
//demo06.js
var name = "window";

var p = {
    name: 'pan',
    getName: function() {
        var self = this;           //利用變量保存的方式保證其訪問的是P對象
        return function() {
            return self.name;
        }
    }
}

var getName = p.getName();

var _name = getName();

console.log(_name);
複製代碼

上面兩處改動分別利用call與變量保存的方式保證了this的指向，那麼，它們哪個產生了閉包哪個沒有產生閉包了？這個問題，但願您與我共同思考。

這些都是我以往的學習筆記。若是您看到此筆記，但願您能指出個人錯誤。有這麼一個羣，裏面的小夥伴互相監督，堅持天天輸出本身的學習心得，不輸出就出局。但願您能加入，咱們一塊兒終身學習。歡迎添加個人我的微信號：Pan1005919589