深入理解JavaScript的作用域
阿新 • • 發佈：2018-11-04
文章目錄
今天面試滴滴被問到JavaScript的作用域，不知道是腦子短路還是怎麼，就只回答了：被一對{ }括起來的就是一個作用域。執行環境、全域性執行環境、作用域鏈都沒有提及到，回答的很是“膚淺”。
或許是自己本身對這塊知識就理解的不夠深刻吧，那就從頭來過吧！
執行環境
執行環境（Execution context）是JavaScript中最為重要的一個概念。
- 執行環境定義了變數或函式有權訪問的其它資料，決定了他們各自的行為；
- 每個執行環境都有一個與之關聯的變數物件；
- 環境中定義的所有變數和函式都儲存在這個物件中。
全域性執行環境
在Web瀏覽器中，全域性執行環境被認為是window物件，因此所有全域性變數和函式都是作為window物件的屬性和方法建立的。
某個執行環境的所有程式碼執行完畢後，該環境被銷燬，儲存在其中的所有變數和函式定義也隨之被銷燬。
全域性執行環境直到應用程式退出——例如關閉網頁或瀏覽器時才會被銷燬。
作用域鏈
當代碼在一個環境中執行時，會建立變數物件的一個作用域鏈。
- 作用域鏈的前端，始終都是當前執行的程式碼所在環境的變數物件。
- 作用域鏈的後端，始終都是全域性執行環境的變數物件。
作用域鏈的用途？
保證對執行環境有權訪問的所有變數和函式的有序訪問。
來個實際的例子比較好理解：
var color = "blue";
function changeColor(){
var anotherColor = "red";
function swapColor (){
var tempColor = anotherColor;
anotherColor = color;
color = tempColor;
}
swapColor();
}
changeColor();
其作用域鏈如下：
內部環境可以通過作用域鏈訪問所有的外部環境，外部環境不能訪問內部環境中的任何變數和函式。
比如，swapColor()其作用域鏈包含：swapColor()的變數物件、changeColor()的變數物件和window全域性變數物件。swapColor()在訪問變數時會先從自己的作用域中搜索，找不到則再搜尋上一級作用域鏈。
而window作用域卻不能訪問changeColor()和swapColor()的變數物件。
塊級作用域
在JavaScript中，不能說一個{ … }就是一個作用域，JavaScript中沒有塊級作用域的概念，塊級作用域概念是在ES6中提出來的，使用let、const宣告變數。
來看一下下面這段程式碼：
if(true){
var color = "red";
}
console.log(color); // "red"
在JavaScript中，變數宣告會被新增到當前的執行環境中，實際上，使用var宣告的變數，其實就是當前執行環境的全域性變量了，儘管它只是在if語句，或者for語句裡面宣告的。
我想說的話
學習進步離不開網友的支援，希望大家以後多多支援，能夠指出文中不足與疑惑的點，我會為大家一一解答。有興趣的小夥伴可以加入QQ群：852590787
