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