瀏覽器是如何解析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：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
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逐行执行
*/
</script>
</body>
</html>實例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
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
// }
</script>
</body>
</html>以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以追蹤php中文網相關教學欄位！ ！ ！
以上是瀏覽器是如何解析JavaScript的？解析原理介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
