本篇為第二篇，本系列文章會在后續(xù)學習后持續(xù)更新。

第一篇：#深入學習JavaScript系列（一）—— ES6中的JS執(zhí)行上下文

第二篇：# 深入學習JavaScript系列（二）——作用域和作用域鏈

第三篇：# 深入學習JavaScript系列（三）——this

第四篇：# 深入學習JavaScript系列（四）——JS閉包

第五篇：# 深入學習JavaScript系列（五）——原型/原型鏈

第六篇： # 深入學習JavaScript系列（六）——對象/繼承

第七篇：# 深入學習JavaScript系列（七）——Promise async/await generator

上一篇提到 在js的執(zhí)行上下文中詞法環(huán)境中會包含作用域鏈，同時詞法環(huán)境解釋階段生成，在執(zhí)行完畢后會被銷毀，這也說明了作用域鏈的生命周期是隨著函數的創(chuàng)建與銷毀的。

先通過兩個問題來引出一下

1、js執(zhí)行上下文和作用域鏈的關系？

作用域鏈和執(zhí)行上下文是緊密相連的概念。

執(zhí)行上下文是JavaScript代碼執(zhí)行時的環(huán)境，包括變量、函數、參數等信息。每個函數都有自己的執(zhí)行上下文，而全局代碼也有自己的執(zhí)行上下文。

從執(zhí)行上下文的角度來說：
作用域鏈是由當前執(zhí)行上下文和所有外層執(zhí)行上下文的變量對象組成的鏈式結構。當JavaScript代碼在一個執(zhí)行上下文中查找變量時，會先在當前執(zhí)行上下文的變量對象中查找，如果沒有找到，就會繼續(xù)在外層執(zhí)行上下文的變量對象中查找，直到找到該變量或者到達全局執(zhí)行上下文。

因此，作用域鏈的形成是由執(zhí)行上下文的嵌套關系決定的。在函數定義時，就已經確定了該函數的作用域鏈。當函數被調用時，會創(chuàng)建一個新的執(zhí)行上下文，并將該執(zhí)行上下文的變量對象添加到作用域鏈的頂端，從而形成新的作用域鏈。
函數銷毀時，與之對應的作用域鏈節(jié)點也會銷毀。

總之，作用域鏈和執(zhí)行上下文是密不可分的，它們共同構成了JavaScript代碼的作用域和變量查找機制。

2、什么是js作用域鏈和作用域？

在 JavaScript 中，每個函數都有一個作用域鏈，它是一個由當前函數和所有外層函數的變量對象組成的列表。當 JavaScript 引擎查找一個變量時，它會先在當前函數的變量對象中查找，如果找不到，就會在外層函數的變量對象中查找，直到找到該變量或者到達全局對象為止。

每個函數內部聲明的變量和函數都只能在該函數內部訪問，外部無法訪問。但是，如果一個函數內部嵌套了另一個函數，那么內部函數可以訪問外部函數的變量和函數，這就是作用域鏈的作用。

作用域鏈的創(chuàng)建是在函數定義時確定的，而不是在函數調用時確定的。當一個函數被調用時，它會創(chuàng)建一個新的執(zhí)行上下文，并將其添加到調用棧中。在執(zhí)行上下文中，會創(chuàng)建一個變量對象，該變量對象包含了當前函數的所有變量和函數聲明。同時，該執(zhí)行上下文的作用域鏈會指向當前函數的作用域鏈。

當 JavaScript 引擎在執(zhí)行一個函數時，如果需要訪問一個變量，它會先在當前函數的變量對象中查找，如果找不到，就會在外層函數的變量對象中查找，直到找到該變量或者到達全局對象為止。這個查找的過程就是作用域鏈的遍歷過程。

通過上面兩個問題的展開，其實已經能大致了解了作用域與作用域鏈，下面就展開講一講 在學習作用域鏈時需要注意哪些內容

3、作用域和作用域鏈的創(chuàng)建

js采用的是靜態(tài)作用域，也就是說js函數的作用域是在函數定義的情況下就已經確定了，那么作用域鏈也是在函數定義的時候就創(chuàng)建，

舉個靜態(tài)作用域的小例子：

var value = 1;function foo() {console.log(value);
}function bar() {var value = 2;foo();
}bar();// 結果是 1 在函數定義的時候確定的作用value等于1 所以調用的時候也等于1 

如果上述的代碼是動態(tài)作用域，那么value就是在執(zhí)行時才生成 所以打印為2

動態(tài)作用域的語言：

1. Bash：Bash 是一種常用的 Unix shell，它支持動態(tài)作用域。在 Bash 中，變量的作用域是在函數被調用時
2. Perl：Perl 是一種通用的高級編程語言，它支持動態(tài)作用域。在 Perl 中，變量的作用域是在程序運行時確定
3. Lisp：Lisp 是一種函數式編程語言，它也支持動態(tài)作用域。在 Lisp 中，變量的作用域是在函數被調用時確定
4. Emacs Lisp：Emacs Lisp 是一種基于 Lisp 的編程語言，它是 Emacs 編輯器的擴展語言，也支持動態(tài)作用域。

4 作用域和作用域鏈的執(zhí)行銷毀

js有兩種函數作用域：全局作用域和函數作用域，創(chuàng)建上面已經講到了，那么執(zhí)行呢，其實是在函數中的變量被使用時會執(zhí)行，先在當前作用域中查找變量，然后再逐步往上查找父級作用域，直到找到為止，
如果最終都沒找到，那么就會拋出一個 ReferenceError 異常。

作用域鏈及作用域鏈的銷毀

當一個函數執(zhí)行完畢之后，那么它的執(zhí)行上下文也隨之銷毀，于此同時。對應的函數作用域和作用域鏈也會銷毀（當前函數作用域節(jié)點），函數中聲明的變量也會被銷毀，這就是js中大垃圾回收機制（gc）
最常見的有標記清除法和計數算法

注：如果函數中使用了閉包，那可能包含外部變量，此時只有外部變量被銷毀時才能銷毀對應的閉包。這就是所謂的內存泄漏。

5 幾個作用域練習題目

題目一:

var scope = "global scope";
function checkscope(){var scope = "local scope";function scope(){return scope;}return scope();
}
checkscope();
//  local scope

var scope = "global scope";
function checkscope(){var scope = "local scope";function scope(){return scope;}return scope;
}
checkscope()();
//  local scope

解釋：函數的作用域基于函數創(chuàng)建的位置，

注：checkscope()()和checkscope()的區(qū)別：

題目一中，checkscope()是一個函數，它返回另一個函數scope()。這個內部函數scope()可以訪問checkscope()函數的局部變量。它是一個閉包函數，因為它可以訪問其外部函數checkscope()的詞法環(huán)境。

checkscope()()是在調用checkscope()返回的函數scope()。它不是直接調用checkscope()函數本身。由于checkscope()函數返回了一個函數，因此需要在checkscope()后添加另一個括號來調用內部函數scope()。相當于》checkscope(). f()

題目二：

var a = 1;function foo() {console.log(a);var a = 2;
}foo();
// undefined

解釋：因為在函數 foo() 中，先執(zhí)行了 var a = 2 語句，此時變量 a 被重新定義并賦值為 2。所以，在函數 foo() 中，變量 a 的值是 2，而不是全局變量 a 的值。因此，執(zhí)行 console.log(a) 語句時，輸出的是 undefined，因為變量 a 被重新定義，但沒有被初始化。 變量能提升 但是賦值不能提升

題目三：

var x = 1;function outer() {var y = 2;function inner() {var z = 3;console.log(x + y + z);}inner();
}outer();
// 6

解釋：在調用inner函數時，可以訪問外層作用域中的變量 x 和 y。變量 x 的值是 1，變量 y 的值是 2，變量 z 的值是 3。所以，執(zhí)行 console.log(x + y + z) 語句時，輸出的是 6。

題目四:

function foo() {var a = 1;function bar() {console.log(a);}return bar;
}var baz = foo();
baz();

答案：代碼輸出的是1。因為bar函數在定義時可以訪問到其外層函數foo的變量a，并將其保存在函數作用域內部。當執(zhí)行baz()時，實際上是執(zhí)行了內部函數bar()，此時訪問到的變量a是定義時保存在bar函數作用域內的變量，所以輸出的是1

題目五：

var a = 1;
function foo() {console.log(a);
}function bar() {var a = 2;foo();
}bar();

答案：代碼輸出的是1。因為bar函數定義了一個名為a的局部變量，并將其賦值為2，但是在調用foo函數時，它會在全局作用域中查找變量a，因為在foo函數內部沒有定義變量a。因此，foo函數輸出的是全局變量a的值，即1。

關鍵點 foo的父級作用域不是bar 而是全局 只是foo（）在bar（）中執(zhí)行。

題目六

var a = 1;
function foo() {var a = 2;function bar() {console.log(a);}return bar;
}var baz = foo();
baz();

答案：代碼輸出的是2。在foo函數內部定義了一個局部變量a，并將其賦值為2，然后返回了內部定義的函數bar。bar函數可以訪問到foo函數的作用域鏈，因此可以訪問到變量a。當調用baz函數時，實際上是執(zhí)行了內部函數bar，此時訪問到的變量a是定義時保存在foo函數作用域內的變量，所以輸出的是2。

和題目五對比，因為bar函數是定義在foo函數內的 ，所以bar的父級作用域是foo

看到這里的同學都很厲害，那就順便給我點個贊吧！

參考一：# JavaScript深入之作域鏈

參考二：# JavaScript深入之詞法作用域和動態(tài)作用域