重學前端學習筆記（十八）--JavaScript的閉包和執行上下文

筆記說明

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，天天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的能夠加入winter的專欄學習【原文有winter的語音】，若有侵權請聯繫我，郵箱：kaimo313@foxmail.com。

1、函數執行過程相關知識

2、閉包（closure）

閉包其實只是一個綁定了執行環境的函數，閉包與普通函數的區別是，它攜帶了執行的環境，就像人在外星中須要自帶吸氧的裝備同樣，這個函數也帶有在程序中生存的環境。

2.一、古典的閉包

• 環境部分
  • 環境
  • 標識符列表
• 表達式部分

2.二、JavaScript 中閉包

• 環境部分
  • 環境：函數的詞法環境（執行上下文的一部分）
  • 標識符列表：函數中用到的未申明的變量
• 表達式部分：函數體

3、執行上下文（執行的基礎設施）

定義：JavaScript 標準把一段代碼（包括函數），執行所需的全部信息定義爲執行上下文。

3.一、在 ES3 中

• scope：做用域，也經常被叫作做用域鏈
• variable object：變量對象，用於存儲變量的對象
• this value：this 值

3.二、在 ES5 中

• lexical environment：詞法環境，當獲取變量時使用
• variable environment：變量環境，當聲明變量時使用
• this value：this 值

3.三、在 ES2018 中

• lexical environment：詞法環境，當獲取變量或者 this 值時使用
• variable environment：變量環境，當聲明變量時使用
• code evaluation state：用於恢復代碼執行位置
• Function：執行的任務是函數時使用，表示正在被執行的函數
• ScriptOrModule：執行的任務是腳本或者模塊時使用，表示正在被執行的代碼
• Realm：使用的基礎庫和內置對象實例
• Generator：僅生成器上下文有這個屬性，表示當前生成器

3.四、函數執行過程所需信息

var b = {}
let c = 1
this.a = 2;
複製代碼

正確執行上面代碼需知道的信息：

• 一、var 把 b 聲明到哪裏
• 二、b 表示哪一個變量
• 三、b 的原型是哪一個對象
• 四、let 把 c 聲明到哪裏
• 五、this 指向哪一個對象

而這些信息就是執行上下文給出來的，下面用 var 聲明與賦值，let，realm分析執行上下文提供的信息。

3.五、var 申明與賦值

一、當即執行的函數表達式（IIFE），經過建立一個函數，而且當即執行，來構造一個新的域，從而控制 var 的範圍。

var b = 1
複製代碼

二、加括號讓函數變成函數表達式

(function(){
    var a;
    //code
}());


(function(){
    var a;
    //code
})();
複製代碼

注意：括號有個缺點，那就是若是上一行代碼不寫分號，括號會被解釋爲上一行代碼最末的函數調用。

一些不加分號的代碼風格規範，會要求在括號前面加上分號。

;(function(){
    var a;
    //code
}())


;(function(){
    var a;
    //code
})()
複製代碼

winter 推薦用 void 關鍵字，語義上 void 運算表示忽略後面表達式的值，變成 undefined。

void function(){
    var a;
    //code
}();
複製代碼

特別注意：var 的特性會致使聲明的變量和被賦值的變量是兩個 b，JavaScript 中有特例，那就是使用 with 的時候，如代碼塊二，咱們先講一下代碼一

with 語句的本來用意是爲逐級的對象訪問提供命名空間式的速寫方式. 也就是在指定的代碼區域, 直接經過節點名稱調用對象。

// 代碼塊一
var obj = {
    a: 1,
    b: 2,
    c: 3
};

// 好比要改對應的值，通常的寫法是重複寫了3次obj
obj.a = 5;
obj.b = 6;
obj.c = 7;

console.log(obj) // {a: 5, b: 6, c: 7}

// 用 with 快捷方式

with (obj) {
    a = 5;
    b = 6;
    c = 7;
}

console.log(obj) // {a: 5, b: 6, c: 7}

// 接下來看一下 with 致使的數據泄露
function kaimo(obj) {
    with (obj) {
        a = 1;
    }
}

var k1 = {
    a: 2
};

var k2 = {
    b: 3
}

kaimo(k1);
console.log(k1.a); // 1

kaimo(k2);
console.log(k2.a); // undefined

console.log(a); // 1 （a被泄漏到全局做用域上）
複製代碼

上述代碼分析：

• 一、建立了 k1 、k2 兩個對象。其中一個有 a 屬性，另一個沒有。
• 二、kaimo(obj) 函數接受一個 obj 的形參，該參數是一個對象引用，並執行了 with(obj) {...}。
• 三、在 with 塊內部，將 2 賦值給了 a。
• 四、將 k1 傳遞進去，a = 2 賦值操做找到了 k1.a 並將 2 賦值給它。
• 五、當 k2 傳遞進去，k2 並無 a 的屬性，所以不會建立這個屬性，k2.a 保持 undefined。

問題：爲何對 k2 的操做會致使數據的泄漏呢？

首先稍微講一下：JavaScript中的 LHS 和 RHS 查詢

LHS（Left-hand Side）引用和 RHS（Right-hand Side）引用。一般是指等號（賦值運算）的左右邊的引用。

console.log(gg)
複製代碼

好比上面這個打印，先查找並取得 gg 的值，而後將它打印出來 gg 的引用是一個 RHS 引用，沒有賦予操做

gg = 666;
複製代碼

上面是對 gg 的引用是一個 LHS 引用，爲賦值操做找到目標

綜上：

一、當傳遞 k2 給 with 時，with 所聲明的做用域是 k2, 從這個做用域開始對 a 進行 LHS 查詢。

二、k2 的做用域、kaimo(…) 的做用域和全局做用域中都沒有找到標識符 a，所以在非嚴格模式下，會自動在全局做用域建立一個全局變量），在嚴格模式下，會拋出 ReferenceError 異常。

// 代碼塊二
var b;
void function(){
    var env = {b:1};
    b = 2;
    console.log("In function b:", b);
    with(env) {
        var b = 3;
        console.log("In with b:", b);
    }
}();
console.log("Global b:", b);

// 輸出結果以下：
// In function b: 2
// In with b: 3
// Global b: undefined

複製代碼

3.六、let

let 是 ES6 開始引入的新的變量聲明模式。

winter 簡單統計了下，如下語句會產生 let 使用的做用域：

for、 if、 switch、 try/catch/finally。

3.七、Realm

在最新的標準（9.0）中，JavaScript 引入了一個新概念 Realm。有道詞典上的意思是："領域，範圍；王國"。Realm 中包含一組完整的內置對象，並且是複製關係。

var iframe = document.createElement('iframe')
document.documentElement.appendChild(iframe)
iframe.src="javascript:var b = {};"

var b1 = iframe.contentWindow.b;
var b2 = {};

console.log(b1, b2);

// {} {}

console.log(typeof b1, typeof b2);

// 谷歌輸出： object object 火狐輸出：undefined object

console.log(b1 instanceof Object, b2 instanceof Object);

//false true
複製代碼

上面代碼能夠看到，在瀏覽器環境中獲取來自兩個 Realm 的對象，因爲 b一、 b2 由一樣的代碼 {} 在不一樣的 Realm 中執行，因此表現出了不一樣的行爲。

我的總結

總的來講，這一篇一臉懵逼（_(:3」∠)_），要去看看《你不知道的JavaScript》才行了。。。