【呆萌の研究】JavaScriptの閉包

CHENGKANG 發布于2019-08-26 11:47 / 1556人閱讀

摘要：為什么會產生閉包究其根本，是因為代表的函數包含的作用域。而在作用域鏈中，外部函數的活動對象始終處于第二位，外部函數的外部函數的活動對象處于第三位直到作為作用域鏈終點的全局執行環境。

前言

此文的內容主要是來自看書的總結+小小的實踐哦~會不斷更新總結。

什么是閉包

書上是這樣定義閉包的：

有權訪問另一個函數作用域中變量的函數。

舉一個例子：

function test(){
    var a = 1;
    var b = function(){
        return a;   
    };
    return b;
}

var c = test();
console.log(c()); //1

這里c是直接得到了b這個函數表達式，但是調用c之后可以得到test的局部變量a的值1，也就是c它訪問到了test作用域中的變量。
其實我初學的時候一直不清楚閉包的意思，因為我感覺這種情況是理所當然的，噗，后來才知道原來就是說這個啊。

為什么會產生閉包

究其根本，是因為b代表的函數包含test的作用域。
在某個函數被調用時會做下面這些事：

創建一個執行環境。

創建相應的作用域鏈（復制函數的[[Scope]]來完成）。

初始化函數的活動對象（arguments和其他命名參數），并被推入作用域最頂端。

而在作用域鏈中，外部函數的活動對象始終處于第二位，外部函數的外部函數的活動對象處于第三位...直到作為作用域鏈終點的全局執行環境。

舉個栗子

function test(value1,value2){
    if(value1 < value2)
        return -1;
    return 0;
}
var result = test(5,10);

以上首先定義了test函數，又在全局作用域中調用它。
第一次調用時，會創建一個包含this、arguments、value1和value2的活動對象。
全局執行環境的變量（this、result、test）則處于test執行環境作用域鏈中的第二位。

每個執行環境都有一個表示變量的對象，稱為變量對象。
全局環境的變量對象一直存在，test()函數局部環境的變量對象只有在執行的時候會存在。

函數的作用域鏈是保存在內部的[[Scope]]屬性中。
作用域本質是一個指針列表，只保存引用。
以下是最初的栗子中test()的原型內容：

匿名函數執行結束后，它的執行環境被銷毀了，但是返回的活動對象沒有消失，所以閉包也不會消失，依舊存在內存中，如果給這個對象賦值null，就可以解除關系。

原來如此

讓我們瞅瞅這段熟悉的代碼：

function test(){
    var result = new Array();
    for(var i=0;i<10;i++){
        result[i] = function(){
            return i;
        }
    }
    return result;
}

這個函數的實際結果是每個函數都返回了10，因為它們實際的i都是同一個。
解決方法是用匿名函數：

function test(){
    var result = new Array();
    for(var i=0;i<10;i++){
        result[i] = function(num)(
            return function(){
                return num;
            }
        }(i);
    }
    return result;
}

由于中間多加上了一層，即每次把一個num值傳入，所以內部的函數是形成了各自num的閉包，于是就沒有像之前一樣共用了。

拓展-關于this

確定this值的情況（以運行時給予函數的）主要有以下幾種：

全局函數中，this等于window。

作為某個對象的方法調用時，this等于那個對象。

看看例子：

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

這里有一個閉包，但是閉包在形成的時候獲取它的this和arguments值只會停止搜索到活動對象，所以它不會把外部包裹的function里的this保存起來。調用obj.getName()()會得到this.name是undefined，因為obj.getName()得到的就是里面return的函數，再次調用，其實是window在調用這個函數，所以this是window。
如果改成以下代碼：

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

就會按預期一樣輸出Bob，因為that保存了this值，而閉包的作用域包括了外部function里的變量，所以可以訪問到這個值。

GPU云服務器云服務器 javascript閉包 javascript閉包詳解呆萌循環閉包

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107551.html

【呆萌の研究】JavaScript常見的繼承方式

摘要：構造函數構造操作符調用的函數就是構造函數。其和其構造函數的指向相同。而構造函數屬性指向的對象帶有屬性，指向函數自身。，回歸構造函數繼承，仔細看看誕生的嘻嘻和哈哈兩位同學可以看到兩個實例都擁有了和兩個屬性，因為方法的運行類似于執行了和。最近在看《JavaScript設計模式》，然后開篇復習了JavaScript中的幾種繼承方式，自己似乎也沒有怎么仔細探究過，目前自己沒怎么碰到過應用的場...

馬永翠 2019-08-22 15:03 評論0 收藏0
【呆萌の研究】圣杯布局引發對margin負值的研究

摘要：問題起源以前一直就聽說圣杯布局，但是沒有怎么去用過，然后這次偶然接觸到了，就學習了一下。繼續試驗我們可以嘗試改變的值，去看看位置的變化。為了方便我們計算，另外寫了一個類似的布局，內容區的寬度是，三個的寬度也都是。問題の起源以前一直就聽說圣杯布局，但是沒有怎么去用過，然后這次偶然接觸到了，就學習了一下。這是一個我從別人寫的文章中復制過來的，關于圣杯布局的比較簡單的說明通過縮放頁面就...

zhangke3016 2019-08-29 13:56 評論0 收藏0
【呆萌の體驗】vue.js初次體驗

摘要：官方默認項目是存放了一個為的打開文件夾有一個，還有一個名為組件的文件夾，里面放了一個文件。部分我們會發現這幾排字就是顯示在頁面的幾排文字部分這其中的這個文件引入了，還有上述的。結合查詢其他說法，就是說它會把是的元素以形式替換。前言我很早就想來學習學習vue.js啦，終于有了那么一些空閑的時間可以拿來學習，于是從前天開始我就每天抽一個多小時來體驗vue.js。當然啦，因為是小白入門，...

wdzgege 2019-08-21 17:21 評論0 收藏0