搜尋
首頁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
如何使用JS和百度地图实现地图平移功能如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台,在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能,并提供具体的代码示例。一、准备工作使用百度地图API前,首先需要在百度地图开放平台(http://lbsyun.baidu.com/)上申请一个开发者账号,并创建一个应用。创建完成

如何使用JS和百度地图实现地图多边形绘制功能如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中,地图应用已经成为常见的功能之一。而地图上绘制多边形,可以帮助我们将特定区域进行标记,方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能,并提供具体的代码示例。首先,我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

js字符串转数组js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法:1、使用“split()”方法,可以根据指定的分隔符将字符串分割成数组元素;2、使用“Array.from()”方法,可以将可迭代对象或类数组对象转换成真正的数组;3、使用for循环遍历,将每个字符依次添加到数组中;4、使用“Array.split()”方法,通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

如何使用JS和百度地图实现地图热力图功能如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介:随着互联网和移动设备的迅速发展,地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式,能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能,并提供具体的代码示例。准备工作:在开始之前,你需要准备以下事项:一个百度开发者账号,并创建一个应用,获取到相应的AP

js中new操作符做了哪些事情js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了:1、创建一个空对象,这个新对象将成为函数的实例;2、将新对象的原型链接到构造函数的原型对象,这样新对象就可以访问构造函数原型对象中定义的属性和方法;3、将构造函数的作用域赋给新对象,这样新对象就可以通过this关键字来引用构造函数中的属性和方法;4、执行构造函数中的代码,构造函数中的代码将用于初始化新对象的属性和方法;5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏!用JavaScript模拟实现打字小游戏!Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是:1、在JavaScript中,创建一个包含需要传递给PHP的数组的变量;2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等;3、在PHP脚本中,接收传递过来的数组数据,并进行相应的处理即可。

js是什么编程语言?js是什么编程语言?May 05, 2019 am 10:22 AM

js全称JavaScript,是一种具有函数优先的轻量级,直译式、解释型或即时编译型的高级编程语言,是一种属于网络的高级脚本语言;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脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MantisBT

MantisBT

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

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

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

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

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

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具