分享 結合demo講解JS引擎工作原理

2022-08-30 14:03:16 字數 1377 閱讀 4516

**如下:

var x = 1;

function

a(y)

returnb;}

var c = a(1);

c(1);

分析如下:

階段一:全域性初始化階段

js引擎在進入一段可執行**時,要完成以下三個初始化工作:

建立乙個全域性物件

構建乙個執行環境棧,與此同時建立乙個全域性執行環境並壓入執行環境棧中

建立乙個與全域性執行環境相關的變數物件,此變數物件不僅包含全域性物件中的所有屬性,還包含全域性定義的變數x和函式a。

階段二:執行函式a

當執行函式a(1)時,js引擎要完成以下三個工作:

建立函式a的執行環境,並將a的執行環境推入執行環境棧頂並獲取執行許可權。

建立函式a的作用域鏈,js中每個函式執行時都會建立自己的執行環境,每個執行環境都有自己的作用域鏈,當執行環境被建立時,其作用域鏈初始化為當前函式的scope所包含的物件,即當前函式的作用域物件,而函式的scope是在函式定義時確定的,初始化為函式定義時所處環境的變數物件。

建立函式a執行環境的變數物件(也叫活動物件),此物件包含函式的形參、arguments物件、this物件以及內部變數和內部函式的定義,然後將此變數物件推入函式a作用域鏈頂端。 

階段三:執行函式b

函式a被執行以後,返回了b的引用,並賦值給了變數c,執行 c(1) 就相當於執行b(1),js引擎需要完成以下工作:

建立函式b的執行環境,並將b的執行環境推入執行環境棧頂並獲取執行許可權。(注意:當函式a返回後,a的執行環境就會從棧中被刪除,只留下全域性執行環境)

建立函式b的作用域鏈,函式b是在函式a中定義的,函式b的作用域鏈初始化為執行環境a的變數物件。

建立函式b執行環境的變數物件(活動物件),並將此變數物件推入函式b作用域鏈的頂端。

當函式b執行「x+y+z」時,需要對x、y、z 三個識別符號進行一一解析,解析過程遵守變數查詢規則:先查詢自己的變數物件(活動物件)中是否存在該屬性,如果存在,則停止查詢並返回;如果不存在,繼續沿著其作用域鏈從頂端依次查詢,直到找到為止,如果整個作用域鏈上都未找到該變數,則返回「undefined」。

函式b的作用域鏈為:

b的變數物件----->a的變數物件----->全域性變數物件

因此,變數x會在a的變數物件中找到,y也會在a的變數物件中找到,z在自己的變數物件中找到 ,結果為2+ 1+ 1 = 4;

總結:

函式的scope是在定義時確定的。

函式的作用域鏈是在執行時確定的。

函式執行時首先會建立執行環境,然後建立函式的作用域鏈,接著建立函式的活動物件。          

reactNative小demo講解 對比iOS

我們通過中文網 安裝reachnative環境,建立xcode工程。結構分析 1.引入相關的類 importreact,from react native 對比ios的2.類的主題 classawesomeprojectextendscomponent 對比ios的 implementation e...

scrapy 自學入門demo分享

本文基於python 3.7.0,win10平台 2018 08 完整專案 注意環境變數是否配置成功 為了安裝順利,請備好梯子安裝過程中注意以下報錯資訊 microsoft visual c 14.0 is required.get it with microsoft visual c build ...

oracle儲存過程demo分享

1.定義儲存過程 定義 create or replace procedure proc01 as n int 注意定義變數後面要加分號 begin select count into n from emp dbms output.put line 員工表中有 n 條記錄!end 呼叫 declar...