JS執(zhí)行上下文的兩個階段做了些啥？
本文轉(zhuǎn)載自微信公眾號「大遷世界」，轉(zhuǎn)載本文請聯(lián)系大遷世界公眾號。
在咱們開始之前，有個問題大家可以一起討論: JS是解釋語言還是編譯語言?
(JS)是一種解釋語言，有自己的編譯器形式，運行在JS引擎中。
每個web瀏覽器都有自己的JS引擎形式，盡管目的一樣。Chrome 有 v8, Mozilla 有 spider monkey等，JS引擎只是將JS源代碼轉(zhuǎn)換成編譯器能夠理解的語言，然后執(zhí)行它。
執(zhí)行上下文
JS 代碼運行的環(huán)境構(gòu)成了執(zhí)行上下文，執(zhí)行上下文決定哪段代碼可以訪問變量、函數(shù)、對象等。
1. 全局執(zhí)行上下文
任何時候碼第一次運行，或者當代碼不在任何函數(shù)中時，它都會進入全局執(zhí)行上下文。在整個代碼執(zhí)行過程中只有一個全局執(zhí)行上下文。
對于瀏覽器全局執(zhí)行上下文，它做兩件事：
- 創(chuàng)建window對象。
- 將 this 指向了 windw 對象 (非嚴格模式)
2. 函數(shù)執(zhí)行上下文
當函數(shù)執(zhí)行時，它就創(chuàng)建一個新的函數(shù)執(zhí)行上下文，可以有任意數(shù)量的函數(shù)執(zhí)行上下文。
執(zhí)行堆棧/調(diào)用堆棧
瀏覽器中JS解器是單線程，同一時間只能干一件事。代碼中有一個全局的執(zhí)行上下文和無數(shù)個函數(shù)執(zhí)行上下文，那么他們是按什么順序執(zhí)行的呢?
這里就需要一個 執(zhí)行上下文棧 的概念了，JS引擎是通過創(chuàng)建執(zhí)行上下文棧來管理執(zhí)行上下文的。這里可以把執(zhí)行上下文棧描述為一個存著函數(shù)調(diào)用的棧結(jié)構(gòu)，執(zhí)行順序遵循先進后出的原則,也就是說一個函數(shù)的執(zhí)行上下文，在函數(shù)執(zhí)行完畢之后，會被移除執(zhí)行上下文棧。
每當腳本在瀏覽器中加載時，堆棧中的第一個元素就是全局執(zhí)行上下文。然而，當一個函數(shù)執(zhí)行時，將創(chuàng)建一個執(zhí)行上下文，并將其虛擬的放置在全局執(zhí)行上下文之上。函數(shù)一旦執(zhí)行完畢，就會從執(zhí)行堆棧中彈出并將控制權(quán)交給到它下面的上下文中。
咱們舉個例子，來模擬上述的過程：
- 步驟1：當上述代碼加載到瀏覽器中時，JS引擎創(chuàng)建一個全局執(zhí)行上下文(global execution context )并將其推入當前執(zhí)行堆棧。
- 步驟2：假設(shè)最后執(zhí)行func1()調(diào)用，然后JS引擎為該函數(shù)創(chuàng)建一個新的執(zhí)行上下文(function execution context)，并將其推到全局執(zhí)行上下文的頂部。
- 步驟3：在func1()中，咱們調(diào)用了func2()，因此JS引擎為該函數(shù)創(chuàng)建一個新的執(zhí)行上下文，并將其推到func1()執(zhí)行上下文的頂部。
- 步驟4；當func2()函數(shù)結(jié)束時，它的執(zhí)行上下文從當前堆棧中彈出，控制權(quán)交給它下面的執(zhí)行上下文，即func1()函數(shù)的執(zhí)行上下文。
- 步驟5：當func1()函數(shù)結(jié)束時，它的執(zhí)行堆棧將從堆棧中刪除，控制權(quán)交給全局執(zhí)行上下文。執(zhí)行完所有代碼后，JS 引擎將從當前堆棧中刪除全局執(zhí)行上下文。
執(zhí)行上下文階段
執(zhí)行上下文主要有兩個階段。
- 創(chuàng)建
- 執(zhí)行
1. 創(chuàng)建階段
函數(shù)創(chuàng)建時做的三件事：
(1) 首先，為用域鏈內(nèi)的每個函數(shù)或變量構(gòu)建到外部環(huán)境的連接。告訴執(zhí)行上下文它應(yīng)該包含什么，以及它應(yīng)該在哪里查找解析函數(shù)引用和變量值的方法。
對于全局環(huán)境，外部環(huán)境為null。然而，全局環(huán)境內(nèi)的所有環(huán)境都是以全局環(huán)境作為其外部環(huán)境的。
例如:如果函數(shù)a包含在函數(shù)b中，這意味著a有一個外部環(huán)境b。
(2) 接著，通過掃描作用鏈，創(chuàng)建一個環(huán)境記錄，其中全局上下文的創(chuàng)建和引用(web瀏覽器中的window)、變量、函數(shù)和函數(shù)參數(shù)都在內(nèi)存中完成。
(3) 最后，在第一步中創(chuàng)建的每個執(zhí)行上下文中確定this的值(對于全局執(zhí)行上下文，this指向的是window)。
因此，咱們可以將創(chuàng)建階段表示為
- 創(chuàng)建階段 = {
- scopeChain: {
- /* 作用域鏈解析 */
- },
- variableObject: {
- /* arguments, 函數(shù)參數(shù), 內(nèi)部變量 等等*/
- },
- this: {},
- }
- variableObject：初始化函數(shù)的參數(shù)variableObject,提升函數(shù)聲明和變量聲明。
- scopeChain： 在執(zhí)行上下文的創(chuàng)建階段，作用域會在變量對象創(chuàng)建之后創(chuàng)建。作用域鏈本身包括變量對象。作用域負責解析變量，當被要求解析變量的時候，會從代碼嵌套結(jié)構(gòu)的最內(nèi)層開始，如果在最內(nèi)層沒有找到對應(yīng)變量，則依次向父級作用域中進行查找，直到尋找到最外層作用域。
- this：確定this的指向，這里需要注意的事this的值是在執(zhí)行的時候確定的，在定義的時候并不會確定。
執(zhí)行階段
這是代碼開始在創(chuàng)建階段形成的執(zhí)行上下文中運行的階段，并逐行分配變量值。
在執(zhí)行開始時，JS 引擎在其創(chuàng)建階段對象中尋找執(zhí)行函數(shù)的引用。如果不能在自己的作用域內(nèi)找到它，它將繼續(xù)向上查找，直到到達全局環(huán)境。
如果在全局環(huán)境中沒有找到引用，它將返回一個錯誤。但是，如果找到了一個引用，并且函數(shù)執(zhí)行正確，那么這個特定函數(shù)的執(zhí)行上下文將從堆棧中彈出，JS 引擎將移動到下一個函數(shù)，在那里，它們的執(zhí)行上下文將被添加到堆棧中并執(zhí)行，依此類推。
咱們通過示例查看上面的兩個階段，以便更好地理解它。
在創(chuàng)建階段，全局執(zhí)行上下文類似于這樣：
- globalExecutionObj = {
- outerEnvironmentConnection: null,
- variableObjectMapping: {
- name: uninitialized,
- title: undefined,
- date: uninitialized,
- func1: func,
- },
- this: window //Global Object
- }
**注意:**上面，let (name)和const (date)定義的變量在創(chuàng)建階段沒有任何關(guān)聯(lián)的值，但是var (title)定義的變量會被設(shè)置為undefined。
這就是為什么咱們可以在聲明var定義的變量之前訪問它們**(雖然沒有定義)**，但是在聲明let和 const變量之前訪問它們時，會得到一個引用錯誤。
這就是咱們所說的變量提升，即所有使用var的變量聲明都被提升它們的局部作用域(在函數(shù)內(nèi)部聲明)或者全局作用域的頂部(在函數(shù)外部聲明的)。
在執(zhí)行階段，完成變量分配。所以全局執(zhí)行上下文在執(zhí)行階段類似如下：
- globalExectutionObj = {
- outerEnvironmentConnection: null,
- variableObjectMapping: {
- name: "overflowjs.com",
- title: "Execution context",
- date: "5 july 2019",
- func1: pointer to function func1,
- },
- this: window //Global Object
- }
**注意:**在執(zhí)行階段，如果JS引擎在源代碼中聲明位置找不到let變量的值，那么它將為其賦值undefined。
現(xiàn)在，當func1執(zhí)行，就會生成一個新的函數(shù)執(zhí)行上下文，其創(chuàng)建階段類似如下：
- func1ExecutionObj = {
- outerEnvironmentConnection: Global,
- variableObjectMapping: {
- arguments: {
- 0: 10,
- length: 1
- },
- num: 10,
- author: undefined,
- val: uninitialized,
- func2: undefined
- fixed: uninitialized
- addFive: pointer to function addFive()
- },
- this: Global Object or undefined
- }
在執(zhí)行階段類似如下：
- func1ExecutionObj = {
- outerEnvironmentConnection: Global,
- variableObjectMapping: {
- arguments: {
- 0: 10,
- length: 1
- },
- num: 10,
- author: "Deepak",
- val: 3,
- func2: pointer to function func2()
- fixed: "Divine"
- addFive: pointer to function addFive()
- },
- this: Global Object or undefined
- }
函數(shù)執(zhí)行完成后，將更新全局環(huán)境。然后全局代碼完成，程序結(jié)束。
作用域與作用域鏈
1. 作用域
JavaScript中的作用域分為三種：
- 全局作用域
- 函數(shù)作用域
- 塊級作用域(ES6)
作用域最大的作用就是隔離變量或函數(shù)，并控制他們的生命周期。作用域是在函數(shù)執(zhí)行上下文創(chuàng)建的時候定義好的，不是在函數(shù)執(zhí)行的時候定義的。
2. 什么是作用域鏈
當一個塊或者函數(shù)嵌套在另一個塊或函數(shù)中時，就發(fā)生了作用域的嵌套。在當前函數(shù)中如果JS引擎無法找到某個變量，就會往上級嵌套的作用域中去尋找，直到找到該變量或抵達全局作用域，這樣的鏈式關(guān)系成為作用域鏈(Scope Chain)。
來個例子演示一下：
- var scope = 'global';
- function checkscope(s) {
- var scope = 'local scope';
- function f() {
- return scope;
- }
- return f();
- }
- checkScope('scope')
首先在checkscope函數(shù)聲明的時候，內(nèi)部會綁定一個[[scope]]的內(nèi)部屬性：
- checkscope.[[scope]] = [
- globalContext.VO
- ];
接著在checkScope函數(shù)在執(zhí)行之前，創(chuàng)建執(zhí)行上下文checkscopeContext,并推入執(zhí)行上下文棧：
- 賦值函數(shù)的[[scope]]屬性初始化作用鏈
- 創(chuàng)建變量對象
- 將變量對象壓入作用域鏈的頂端
- // -> 初始化作用域鏈；
- checkscopeContext = {
- scope: [globalContext.VO],
- }
- // -> 創(chuàng)建變量對象
- checkscopeContext = {
- scope: [globalContext.VO],
- VO = {
- arguments: {
- 0: 'scope',
- length: 1,
- },
- s: 'scope', // 傳入的參數(shù)
- f: function f(),
- scope: undefined, // 此時聲明的變量為undefined
- },
- }
- // -> 將變量對象壓入作用域鏈的最頂端
- checkscopeContext = {
- scope: [VO, globalContext.VO],
- VO = {
- arguments: {
- 0: 'scope',
- length: 1,
- },
- s: 'scope', // 傳入的參數(shù)
- f: function f(),
- scope: undefined, // 此時聲明的變量為undefined
- },
- }
執(zhí)行階段，修改變量對象里面對應(yīng)字段的值：
- checkscopeContext = {
- scope: [VO, globalContext.VO],
- VO = {
- arguments: {
- 0: 'scope',
- length: 1,
- },
- s: 'scope', // 傳入的參數(shù)
- f: pointer to function f(),
- scope: 'local scope', // 變量賦值
- }
- }
在代碼執(zhí)行階段，會看到f函數(shù)的聲明代碼，給f函數(shù)綁定[[scope]]屬性：
- f.[[scope]] = [
- checkscopeContext.VO, // f函數(shù)的作用域還包括checkscope的變量對象
- globalContext.VO
- ];
文本到這就結(jié)束了，希望對大伙有所幫助。
