瀏覽器是如何解析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>
以上就是本篇文章的全部內容，希望能對大家的學習有所幫助。更多精彩內容大家可以關注相關教程欄目！！！
以上就是瀏覽器是如何解析JavaScript的？解析原理介紹的詳細內容，更多請關注其它相關文章！
