執(zhí)行上下文即代碼的執(zhí)行環(huán)境。在 JS 代碼的執(zhí)行過程中，引擎會為我們創(chuàng)建“執(zhí)行上下文?！保ㄒ步姓{用棧）。
執(zhí)行上下文的分類
執(zhí)行上下文主要分為三類：
- 全局上下文 —— 全局代碼所處的環(huán)境，不在函數(shù)中的代碼都在全局執(zhí)行上下文中
- 函數(shù)上下文 —— 在函數(shù)調用時創(chuàng)建的上下文
- Eval 執(zhí)行上下文 —— 運行 Eval 函數(shù)中的代碼時所創(chuàng)建的環(huán)境
執(zhí)行上下文的生命周期
創(chuàng)建階段
執(zhí)行上下文的初始化狀態(tài)，此時一行代碼都還沒有執(zhí)行，只是做了一些準備工作，具體包括：
- 創(chuàng)建全局對象（Window 有了）；
- 創(chuàng)建 this ，并讓它指向全局對象；
- 給變量和函數(shù)安排內存空間；
- 默認給變量賦值為 undefined；將函數(shù)聲明放入內存；
- 創(chuàng)建作用域鏈
執(zhí)行階段
逐行執(zhí)行腳本里的代碼，執(zhí)行賦值操作
?? 變量提升
console.log(name) // undefined
var name = 'xiuyan'
JS 引擎不會拋出變量未聲明的錯誤，而是會輸出一個 undefined 值，表現(xiàn)得好像這個 name 變量早已被聲明過一樣。像這樣的現(xiàn)象，我們叫它 “變量提升”。
結合我們的上下文創(chuàng)建過程，所謂的 “提升”，只是變量的創(chuàng)建過程（在上下文創(chuàng)建階段完成）和真實賦值過程（在上下文執(zhí)行階段完成）的不同步帶來的一種錯覺。執(zhí)行上下文在不同階段完成的不同工作，是 “變量提升 “的本質。
函數(shù)上下文和全局上下文的區(qū)別
- 創(chuàng)建的時機 —— 全局上下文在進入腳本之初就被創(chuàng)建，而函數(shù)上下文則是在函數(shù)調用時被創(chuàng)建
- 創(chuàng)建的頻率 —— 全局上下文僅在代碼剛開始被解釋的時候創(chuàng)建一次；而函數(shù)上下文由腳本里函數(shù)調用的多少決定，理論上可以創(chuàng)建無數(shù)次
- 創(chuàng)建階段的工作內容不完全相同 —— 函數(shù)上下文不會創(chuàng)建全局對象（Window），而是創(chuàng)建參數(shù)對象（arguments）；創(chuàng)建出的 this 不再死死指向全局對象，而是取決于該函數(shù)是如何被調用的 —— 如果它被一個引用對象調用，那么 this 就指向這個對象；否則，this 的值會被設置為全局對象或者 undefined（在嚴格模式下）
調用棧
函數(shù)執(zhí)行完畢后，其對應的執(zhí)行上下文也隨之消失了。這個消失的過程，我們叫它“出?！?。
因為函數(shù)上下文可以有許多個，我們不可能保留所有的上下文。當一個函數(shù)執(zhí)行完畢，其對應的上下文必須讓出之前所占用的資源。因此上下文的建立和銷毀，就對應了一個” 入棧 “和” 出棧 “的操作。當我們調用一個函數(shù)的時候，就會把它的上下文推入調用棧里，執(zhí)行完畢后出棧，隨后再為新的函數(shù)進行入棧操作。
function testA() {
console.log('執(zhí)行第一個測試函數(shù)的邏輯');
testB();
console.log('再次執(zhí)行第一個測試函數(shù)的邏輯');
}
function testB() {
console.log('執(zhí)行第二個測試函數(shù)的邏輯');
}
testA();
以上這個腳本的執(zhí)行上下文棧，隨著代碼的執(zhí)行，會經(jīng)歷一個這樣的過程：
-
執(zhí)行之初，全局上下文創(chuàng)建：
全局上下文創(chuàng)建.png -
執(zhí)行到 testA 調用處，testA 對應的函數(shù)上下文創(chuàng)建：
testA函數(shù)上下文創(chuàng)建 -
執(zhí)行到 testB 處，testB 對應的函數(shù)上下文創(chuàng)建：
testB函數(shù)上下文創(chuàng)建.png -
testB 執(zhí)行完畢，對應上下文出棧，剩下 testA 和 全局上下文：
testB出棧.png -
testA 執(zhí)行完畢，對應執(zhí)行上下文出棧，剩下全局上下文：
testA出棧.png
作用域
當代碼在一個環(huán)境中執(zhí)行時，會創(chuàng)建變量對象的一個作用域鏈．作用域鏈的用途是保證對執(zhí)行環(huán)境有權訪問的所有變量和函數(shù)的有序訪問．
作用域的前端始終都是當前執(zhí)行的代碼所在環(huán)境的變量對象．如果這個環(huán)境是函數(shù)，則將其活動對象作為變量對象．全局執(zhí)行環(huán)境的變量對象始終都是作用域鏈中的最后一個對象。
var color = "blue";
function changeColor(){
var anotherColor = "red";
function swapColors(){
var tempColor = anotherColor;
anotherColor = color;
color = tempColor;
//這里可以訪問color,anotherColor,tempColor
}
//這里可以訪問color,anotherColor,但不能訪問tempColor
swapColors();
}
//這里只能訪問color
changeColor();
作用域是” 訪問變量的一套規(guī)則 “，作用域其實就是當前所處的執(zhí)行上下文。我們基于執(zhí)行上下文，來理解一下作用域的特征：
- 作用域對外隔離
全局作用域 相對于 testA 的函數(shù)作用域，它是外部作用域；全局作用域、testA 相對于 testB 的函數(shù)作用域，它們都是外部作用域。我們知道，作用域在嵌套的情況下，外部作用域是不能訪問內部作用域的變量的。 - 閉包 —— 特殊的 “彈出”
一般來說，函數(shù)出棧后，我們都沒有辦法再訪問到函數(shù)內部的變量了。但閉包可不是這樣。在執(zhí)行上下文的創(chuàng)建階段，跟著被創(chuàng)建的還有作用域鏈！這個作用域鏈在函數(shù)中以內部屬性的形式存在，在函數(shù)定義時，其對應的父變量對象就會被記錄到這個內部屬性里。閉包正是通過這一層作用域鏈的關系，實現(xiàn)了對父作用域執(zhí)行上下文信息的保留。 - 自由變量的查找 —— 作用域鏈與上下文變量的結合
引擎會沿著作用域鏈向上查找變量。這里是沿著作用域鏈找，可不是沿著調用棧一層一層往上找哦！調用棧是在執(zhí)行的過程中形成的，而作用域鏈可是在書寫階段就決定了。因此，testB 里找不到的變量，絕不會去 testA 里找，而是去全局上下文變量里找！
function show(){
var b = 1;
var a = ++b;
}
show();
print(a); //報錯
function show(){
var b = 1;
a = ++b; //全局變量a
}
show();
print(a); //2
