瀏覽器是如何解析JavaScript的？解析原理介紹
- 青灯夜游轉載
- 2019-01-05 10:46:274278瀏覽
瀏覽器是如何解析JavaScript的？這篇文章就來帶大家認識瀏覽器解析JavaScript的原理，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。 【推薦影片教學：JavaScript影片教學】
瀏覽器解析JavaScript原理特點:
1、跨平台
2、弱型別javascript 定義的時候不需要定義資料型別,資料型別是根據變數值來決定的.
var a = 10; //数字类型 var a = true //boolean类型
( 強型別: 定義變數的時候需要定義變數的型別:例如java,C#中的int a = 10 boolean a = true,直接確定了資料類型)
3、解釋執行,逐行執行
javascript 執行過程
1、文法偵測
就是看你有沒有基本的文法錯誤,例如中文,關鍵字錯誤...
#2、詞法分析(預編譯)
#3、逐行執行
詞法分析
預編譯的過程（兩種情況）
1、全域(直接是script標籤中的程式碼,不包含函數執行)
以下面demo為例：
console.log(a); console.log(b)
var a = 100;
console.log(a) var b = 200 var c = 300 function a(){
} function fun(){
} 執行前:
1)、 先產生一個GO(global object)物件,看不到,但是可以模擬出來用來分析
GO = { //自带的属性都不写
}
2) 、分析變數宣告,變數名為屬性名,值為undefined
GO = {
a : undefined,
b : undefined,
c : undefined
}
3）、分析函數宣告,函數名稱為屬性名稱,值為函數體，如果函數名稱和變數名稱相同，則無情覆蓋
GO = {
a : function a(){
},
b : undefined,
c : undefined,
fun : function fun(){
}
}
此時,GO就是預編譯完成的最終物件,詞法分析結束。
4）、 逐行執行，分析過（變數聲明，函數宣告）不用管了，只管賦值（變數賦值）
a赋了一次值,值改变为100
GO = {
a : 100,
b : undefined,
c : undefined,
fun : function fun(){
}
}
2、局部（ 函數執行的時候）
以這個demo為例：
num = 100510)
1）、預先編譯的時候
GO = {
num : undefined,
fun : function
}
2）、執行過程
GO = {
num : 100,
fun : function
}
3）、函數呼叫,也是會產生自己的作用域(AO:active object),AO活動物件.函數呼叫時候,執行前的一瞬間產生的,如果有多個函數的呼叫,會產生多個AO
ⅰ、函數執行前的一瞬間，產生AO活動物件
fun.AO = {
}
ⅱ、 分析參數,形參作為物件的屬性名稱,實參作為物件的屬性值
fun.AO = {
num : 5
}
ⅲ、分析變數宣告,變數名為屬性名稱,值為undefined,如果遇到AO物件上屬性同名,不去做任何改變
fun.AO = {
num : 5
}
ⅳ、分析函數宣告,函數名為屬性名稱,值為函數體，如果遇到AO物件上屬性同名，則無情覆寫（這裡沒有函數聲明，跳過）
4）逐行執行
#實例：
在這裡我們看幾個實例：
實例1：
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
8019067d09615e43c7904885b5246f0a
console.log(test); //function
function test(test){
console.log(test); //function
var test = 123;
console.log(test); //123
function test(){
}
console.log(test); //123
var test = function(){}
console.log(test); //function
}
test(10);
var test = 456;
/*1.分析变量
GO={
test:undefined
}
2.分析函数{
test:function
}
3.逐行执行
第21行函数的调用
3.1test.AO={}
3.2参数
test.AO={
test:10
}
3.3变量声明
test.AO={
test:10
}
3.4函数的声明
test.AO={
test:function
}
4逐行执行
*/
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e 實例2：
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
8019067d09615e43c7904885b5246f0a
function test(){
console.log(b); //undefined
if(a){ //undefined转换成false
var b = 100;
}
c = 123;
console.log(c); //123
}
var a;
test();
a = 20;
test();
console.log(c); //123
// 1.生成GO
// GO = {
//
// }
// 2.var
// GO = {
// a : undefined
// }
// 3.函数声明
// GO = {
// a : undefined,
// test : function
// }
// 4.逐行执行
// 4.1.1 18行,test调用,生成test.AO ={}
// 4.1.2 参数 没有,跳过
// 4.1.3 var
// test.AO = {
// b : undefined
// }
// 4.1.4 函数声明 没有,跳过
// 4.1.5 结果
// test.AO = {
// b : undefined
// }
// 4.1.6 逐行执行
// 14行,改变GO
// GO = {
// a : undefined,
// test : function,
// c : 123
// }
//
// 4.2 19行 a值发生了改变
// GO = {
// a : 20,
// test : function,
// c : 123
// }
//
// 4.3 20行,test调用 生成test.AO={}
// 4.3.1 参数 没有
// 4.3.2 变量声明
// test.AO = {
// b : undefined
// }
// 4.3.3 函数声明 没有
// 4.3.4 结果
// test.AO = {
// b : undefined
// }
// 4.3.5 逐行执行
// test.AO = {
// b : 100
// }
2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位！ ！ ！
以上是瀏覽器是如何解析JavaScript的？解析原理介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！