javascript
浏览器解析JavaScript原理
1.瀏覽器解析JavaScript原理特點:
1.跨平臺?
2.弱類型 javascript 定義的時候不需要定義數據類型,數據類型是根據變量值來確定的.
? ?var a = 10; 數字類型
? ? ? ? ? var a = true boolean類型
? ( 強類型: 定義變量的時候需要定義變量的類型:例如java,C#中的int a = 10 boolean a = true,直接確定了數據類型)
3.解釋執行,逐行執行
?
2.javascript 執行過程
1.語法檢測 看你有沒有基本的語法錯誤,例如中文,關鍵字錯誤...
2.詞法分析(預編譯)
3.逐行執行
3.詞法分析
預編譯的過程（兩種情況）
1.全局(直接是script標簽中的代碼,不包括函數執行)
以下面demo為例：
console.log(a);console.log(b)var a = 100;console.log(a)var b = 200var c = 300function a(){}function fun(){}?
? ? 執行前:
1) 首先生成一個GO(global object)對象,看不到,但是可以模擬出來用來分析
2) 分析變量聲明,變量名為屬性名,值為undefined
GO = {a : undefined,b : undefined,c : undefined}? 3）分析函數聲明,函數名為屬性名,值為函數體，如果函數名和變量名相同，則無情覆蓋
GO = {a : function a(){},b : undefined,c : undefined,fun : function fun(){} }??此時,GO就是預編譯完成的最終對象,詞法分析結束。
4） 逐行執行，分析過（變量聲明，函數聲明）不用管了，只管賦值（變量賦值）
a賦了一次值,值改變為100GO = {a : 100,b : undefined,c : undefined,fun : function fun(){}}2.局部（?函數執行的時候）
以這個demo為例：
var num = 100;function fun(num){console.log(num) }fun(5)fun(10)??1）預編譯的時候
GO = {num : undefined,fun : function}? 2）執行過程
GO = {num : 100,fun : function} ? 3）函數調用,也是會生成自己的作用域(AO:active object),AO活動對象. 函數調用時候,執行前的一瞬間產生的,如果有多個函數的調用,會產生多個AO
3.1 函數執行前的一瞬間，生成AO活動對象
3.2 分析參數,形參作為對象的屬性名,實參作為對象的屬性值
fun.AO = {num : 5}3.3 分析變量聲明,變量名為屬性名,值為undefined,如果遇到AO對象上屬性同名,不去做任何改變
fun.AO = {num : 5}3.4 分析函數聲明,函數名為屬性名,值為函數體，如果遇到AO對象上屬性同名，則無情覆蓋（在這里沒有函數聲明，跳過）
4）逐行執行
?
實例：
在這里我們看幾個實例：
1，
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">console.log(test); //functionfunction test(test){console.log(test); //functionvar test = 123;console.log(test); //123function test(){}console.log(test); //123var 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); //undefinedif(a){ //undefined轉換成falsevar 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原理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 永修到姜堰汽车司机电话多少？
- 下一篇： gradle idea java ssm