搜尋
首頁web前端js教程深入理解JS 執行細節

javascript從定義到執行,JS引擎在實作層做了很多初始化工作,因此在學習JS引擎工作機制之前,我們需要引入幾個相關的概念:執行環境堆疊、全域物件、執行環境、變數物件、活動物件、作用域和作用域鍊等,這些概念正是JS引擎工作的核心元件。這篇文章的目的不是孤立的為你講解每一個概念,而是透過一個簡單的demo來展開分析,全局講解JS引擎從定義到執行的每一個細節,以及這些概念在其中所扮演的角色。

var x = 1;  //定义一个全局变量 xfunction A(y){   var x = 2;  //定义一个局部变量 x   function B(z){ //定义一个内部函数 B
       console.log(x+y+z);
   }   return B; //返回函数B的引用}var C = A(1); //执行A,返回BC(1); //执行函数B

這個demo是一個閉包,執行結果是4,下面我們將分全域初始化執行函數A執行函數B 三個階段來分析JS引擎的工作機制

一、全域初始化

JS引擎在進入一段可執行的程式碼時,需要完成以下三個初始化工作:

首先,建立一個全域物件(Global Object) , 這個物件全域只存在一份,它的屬性在任何地方都可以訪問,它的存在伴隨著應用程式的整個生命週期。全域物件在建立時,將Math,String,Date,document 等常用的JS物件作為其屬性。由於這個全域物件不能透過名字直接訪問,因此還有另外一個屬性window,並將window指向了自身,這樣就可以透過window訪問這個全域物件了。用偽程式碼模擬全域物件的大體結構如下:

//创建一个全局对象var globalObject = { 
    Math:{},
    String:{},
    Date:{},
    document:{}, //DOM操作    ...
    window:this //让window属性指向了自身}

然後,JS引擎需要建構一個執行環境堆疊( Execution Context Stack) ,同時,也要建立一個全域執行環境(Execution Context)EC ,並將這個全域執行環境EC壓入執行環境堆疊中。執行環境棧的作用是為了確保程式能夠按照正確的順序被執行。在javascript中,每個函數都有自己的執行環境,當執行一個函數時,函數的執行環境就會被推入執行環境堆疊的頂部並取得執行權。當這個函數執行完畢,它的執行環境又從這個堆疊的頂端被刪除,並且把執行權並還給之前執行環境。我們用偽代碼來模擬執行環境棧和EC的關係:

var ECStack = []; //定义一个执行环境栈,类似于数组var EC = {};   //创建一个执行空间,//ECMA-262规范并没有对EC的数据结构做明确的定义,你可以理解为在内存中分配的一块空间ECStack.push(EC); //进入函数,压入执行环境ECStack.pop(EC);  //函数返回后,删除执行环境

最後,JS引擎還要創建一個與EC關聯的全域變數對象(Varibale Object) VO,  並把VO指向全域對象,VO中不僅包含了全域物件的原始屬性,也包含在全域定義的變數x 和函數A,同時,在定義函數A的時候,也為A 增加了一個內部屬性scope,並將scope指向了VO。每個函數在定義的時候,都會建立一個與之關聯的scope屬性,scope總是指向定義函數時所在的環境。此時的ECStack結構如下:

ECStack = [   //执行环境栈
    EC(G) = {   //全局执行环境
        VO(G):{ //定义全局变量对象
            ... //包含全局对象原有的属性
            x = 1; //定义变量x
            A = function(){...}; //定义函数A
            A[[scope]] = this; //定义A的scope,并赋值为VO本身        }
    }
];

二、執行函數A

當執行進入A(1) 時,JS引擎需要完成以下工作:

首先,JS引擎會建立函數A的執行環境EC,然後EC推入執行環境堆疊的頂端並取得執行權。此時執行環境堆疊中有兩個執行環境,分別是全域執行環境和函數A執行環境,A的執行環境在堆疊頂,全域執行環境在堆疊的底部。然後,創建函數A的作用域鏈(Scope Chain) ,在javascript中,每個執行環境都有自己的作用域鏈,用於標識符解析,當執行環境被創建時,它的作用域鏈就會初始化為目前運行函數的scope所包含的物件。

接著,JS引擎會創建一個當前函數的活動物件(Activation Object) AO,這裡的活動物件扮演著變數物件的角色,只是在函數中的叫法不同而已(你可以認為變數物件是一個總的概念,而活動物件是它的一個分支), AO中包含了函數的形參、arguments物件、this物件、以及局部變數和內部函數的定義,然後AO會被推入作用域鏈的頂端。要注意的是,在定義函數B的時候,JS引擎同樣也會為B添加了一個scope屬性,並將scope指向了定義函數B時所在的環境,定義函數B的環境就是A的活動對象AO,而AO位於鍊錶的前端,由於鍊錶具有首尾相連的特點,因此函數B的scope指向了A的整個作用域鏈。 讓我們再看看此時的ECStack結構:

ECStack = [   //执行环境栈
    EC(A) = {   //A的执行环境
        [scope]:VO(G), //VO是全局变量对象
        AO(A) : { //创建函数A的活动对象
            y:1,
            x:2,  //定义局部变量x
            B:function(){...}, //定义函数B
            B[[scope]] = this; //this指代AO本身,而AO位于scopeChain的顶端,因此B[[scope]]指向整个作用域链
            arguments:[],//平时我们在函数中访问的arguments就是AO中的arguments            this:window  //函数中的this指向调用者window对象        },
        scopeChain:<AO(A),A[[scope]]>  //链表初始化为A[[scope]],然后再把AO加入该作用域链的顶端,此时A的作用域链:AO(A)->VO(G)    },
    EC(G) = {   //全局执行环境
        VO(G):{ //创建全局变量对象
            ... //包含全局对象原有的属性
            x = 1; //定义变量x
            A = function(){...}; //定义函数A
            A[[scope]] = this; //定义A的scope,A[[scope]] == VO(G)        }
    }
];

三、 执行函数B

函数A被执行以后,返回了B的引用,并赋值给了变量C,执行 C(1) 就相当于执行B(1),JS引擎需要完成以下工作:

首先,还和上面一样,创建函数B的执行环境EC,然后EC推入执行环境栈的顶部并获取执行权。 此时执行环境栈中有两个执行环境,分别是全局执行环境和函数B的执行环境,B的执行环境在栈顶,全局执行环境在栈的底部。(注意:当函数A返回后,A的执行环境就会从栈中被删除,只留下全局执行环境)然后,创建函数B的作用域链,并初始化为函数B的scope所包含的对象,即包含了A的作用域链。最后,创建函数B的活动对象AO,并将B的形参z, arguments对象 和 this对象作为AO的属性。此时ECStack将会变成这样:ECStack = [   //执行环境栈

    EC(B) = {   //创建B的执行环境,并处于作用域链的顶端
        [scope]:AO(A), //指向函数A的作用域链,AO(A)->VO(G)        var AO(B) = { //创建函数B的活动对象
            z:1,
            arguments:[],            this:window
        }
        scopeChain:<AO(B),B[[scope]]>  //链表初始化为B[[scope]],再将AO(B)加入链表表头,此时B的作用域链:AO(B)->AO(A)-VO(G)    },
    EC(A), //A的执行环境已经从栈顶被删除,
    EC(G) = {   //全局执行环境
        VO:{ //定义全局变量对象
            ... //包含全局对象原有的属性
            x = 1; //定义变量x
            A = function(){...}; //定义函数A
            A[[scope]] = this; //定义A的scope,A[[scope]] == VO(G)        }
    }
];

当函数B执行“x+y+z”时,需要对x、y、z 三个标识符进行一一解析,解析过程遵守变量查找规则:先查找自己的活动对象中是否存在该属性,如果存在,则停止查找并返回;如果不存在,继续沿着其作用域链从顶端依次查找,直到找到为止,如果整个作用域链上都未找到该变量,则返回“undefined”。从上面的分析可以看出函数B的作用域链是这样的:

AO(B)->AO(A)->VO(G)

因此,变量x会在AO(A)中被找到,而不会查找VO(G)中的x,变量y也会在AO(A)中被找到,变量z 在自身的AO(B)中就找到了。所以执行结果:2+1+1=4.

简单的总结语

了解了JS引擎的工作机制之后,我们不能只停留在理解概念的层面,而要将其作为基础工具,用以优化和改善我们在实际工作中的代码,提高执行效率,产生实际价值才是我们的真正目的。就拿变量查找机制来说,如果你的代码嵌套很深,每引用一次全局变量,JS引擎就要查找整个作用域链,比如处于作用域链的最底端window和document对象就存在这个问题,因此我们围绕这个问题可以做很多性能优化的工作,当然还有其他方面的优化,此处不再赘述,本文仅当作抛砖引玉吧!

 

 

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python vs. JavaScript:比較用例和應用程序Python vs. JavaScript:比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

了解JavaScript引擎:實施詳細信息了解JavaScript引擎:實施詳細信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

Python vs. JavaScript:學習曲線和易用性Python vs. JavaScript:學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具