JavaScript預(yù)編譯和執(zhí)行過程詳解
javascript相對于其它語言來說是一種弱類型的語言，在其它如java語言中，程序的執(zhí)行需要有編譯的階段，而在javascript中也有類似的“預(yù)編譯階段”（javascript的預(yù)編譯是以代碼塊為范圍<script></script>，即每遇到一個代碼塊都會進行預(yù)編譯>執(zhí)行），了解javascript引擎的執(zhí)行機理，將有助于在寫js代碼過程中的思路總結(jié)。
首先javascript是解釋型語言，自然就是編譯一行，執(zhí)行一行。
js運行過程分為三步：
1、語法分析
2、預(yù)編譯
3、解釋執(zhí)行
語法分析就是指js引擎去判斷檢查你的代碼是否存在語法錯誤，解釋執(zhí)行更不用多說，自然就是執(zhí)行你的代碼，然而重中之重的是預(yù)編譯，預(yù)編譯簡單理解就是在內(nèi)存中開辟一些空間，存放一些變量與函數(shù) 。
理解預(yù)編譯首先要明白函數(shù)聲明和變量賦值：
javascript中的兩種聲明方式，var和function，前者聲明的是變量，后者聲明的是方法。
在預(yù)編譯中，javascript對這兩種聲明做出了兩種處理方案:
<script>
var a = "1"; //聲明變量a
function b() { //聲明方法b
alert();
}
var c = function () { //聲明變量c
alert();
}
</script>以上代碼塊中，a、c為變量賦值，b為函數(shù)聲明，當(dāng)執(zhí)行以上的代碼時，首先會進入預(yù)編譯階段，對與變量賦值a、c會在內(nèi)存中開辟一塊內(nèi)存空間并指向變量名，且賦值為undefined
預(yù)編譯(函數(shù)執(zhí)行前)
1. 創(chuàng)建AO對象（Active Object）
2. 查找函數(shù)形參及函數(shù)內(nèi)變量聲明，形參名及變量名作為AO對象的屬性，值為undefined
3. 實參形參相統(tǒng)一，實參值賦給形參
4. 查找函數(shù)聲明，函數(shù)名作為AO對象的屬性，值為函數(shù)引用
題目1:
<script>
function fn(a) {
console.log(a)
var a = 123
console.log(a)
function a() {
}
console.log(a)
var b = function () {
}
console.log(b)
function d() {
}
console.log(d)
}
fn(1)
</script>分析:
1)、創(chuàng)建AO對象
AO{
}2)、查找函數(shù)形參及函數(shù)內(nèi)變量聲明，形參名及變量名作為AO對象的屬性，值為undefined
AO{
a:undefined,
b:undefined,
}3)、實參形參相統(tǒng)一，實參值賦給形參
AO{
a:1,
b:undefined,
}4)、查找函數(shù)聲明，函數(shù)名作為AO對象的屬性，值為函數(shù)引用
AO{
a:function a() {
},
b:undefined,
d:function d() {
}
}變量、函數(shù)聲明后代碼順序
function fn(a) {
var a
var b
function a() {
}
function d() {
}
console.log(a)
a = 123
console.log(a)
console.log(a)
b = function () {
}
console.log(b)
console.log(d)
}解釋執(zhí)行
當(dāng)執(zhí)行到a=123之前時: 此時 console.log(a)打印的值為: function a() {}
AO{
a:function a() {
},
b:undefined,
d:function d() {
}
}當(dāng)執(zhí)行到a=123時: 此時 console.log(a)打印的值為: 123 123
AO{
a:123,
b:undefined,
d:function d() {
}
}當(dāng)執(zhí)行到b = function () {}時：
此時 console.log(b)打印的值為:function () {}
console.log(d)打印的值為:function d() {}
AO{
a:123,
b:function () {
},
d:function d() {
}
}瀏覽器執(zhí)行結(jié)果:
題目2:
<script>
function test(a, b) {
console.log(a);
c = 0;
var c;
a = 3;
b = 2;
console.log(b);
function b() {
}
function d() {
}
console.log(b)
}
test(1)
</script>分析:
1)、創(chuàng)建AO對象
AO{
}2)、查找函數(shù)形參及函數(shù)內(nèi)變量聲明，形參名及變量名作為AO對象的屬性，值為undefined
AO{
a:undefined,
b:undefined,
c:undefined
}3)、實參形參相統(tǒng)一，實參值賦給形參
AO{
a:1,
b:undefined,
c:undefined
}4)、查找函數(shù)聲明，函數(shù)名作為AO對象的屬性，值為函數(shù)引用
AO{
a:1,
b:function b() {
},
c:undefined,
d:function d() {
}
}變量、函數(shù)聲明后代碼順序
function test(a, b) {
var a
var b
var c
function b() {
}
function d() {
}
console.log(a);
c = 0;
a = 3;
b = 2;
console.log(b);
console.log(b)
}解釋執(zhí)行
當(dāng)執(zhí)行到function d() {}之前時: 此時 console.log(a)打印的值為: 1
AO{
a:1,
b:function b() {
},
c:undefined,
d:function d() {
}
}當(dāng)執(zhí)行到b=2之前時: 此時 console.log(b)打印的值為: 2 2
AO{
a:1,
b:2,
c:0,
d:function d() {
}
}瀏覽器執(zhí)行結(jié)果:
題目3:
<script>
function test(a, b) {
console.log(a);
console.log(b);
var b = 234;
console.log(b);
a = 123;
console.log(a);
function a() {
}
var a;
b = 456;
var b = function () {
}
console.log(a);
console.log(b);
}
test(1)
</script>分析:
1)、創(chuàng)建AO對象
AO{
}2)、查找函數(shù)形參及函數(shù)內(nèi)變量聲明，形參名及變量名作為AO對象的屬性，值為undefined
AO{
a:undefined,
b:undefined
}3)、實參形參相統(tǒng)一，實參值賦給形參
AO{
a:1,
b:undefined
}4)、查找函數(shù)聲明，函數(shù)名作為AO對象的屬性，值為函數(shù)引用
AO{
a:function a() {
},
b:undefined
}變量、函數(shù)聲明后代碼順序
function test(a, b) {
var a;
var b;
function a() {
}
console.log(a);
console.log(b);
b = 234;
console.log(b);
a = 123;
console.log(a);
b = 456;
b = function () {
}
console.log(a);
console.log(b);
}解釋執(zhí)行
當(dāng)執(zhí)行到function a() {}時:
此時 console.log(a)打印的值為: function a() {}
console.log(b)打印的值為: undefined
AO{
a:function a() {
},
b:undefined
}當(dāng)執(zhí)行到 b=234時: 此時 console.log(b)打印的值為: 234
AO{
a:function a() {
},
b:234
}當(dāng)執(zhí)行到 a=123時: 此時 console.log(a)打印的值為: 123
AO{
a:123,
b:234
}當(dāng)執(zhí)行到 b=456 時
AO{
a:123,
b:456
}當(dāng)執(zhí)行到 b = function () {}時:
此時 console.log(a)打印的值為: 123
console.log(b)打印的值為: function () {}
AO{
a:123,
b:function () {
}
}瀏覽器執(zhí)行結(jié)果:
到此這篇關(guān)于JavaScript預(yù)編譯和執(zhí)行過程的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript instanceof 的使用方法示例介紹
判斷一個變量的類型嘗嘗會用 typeof 運算符而他畢竟有些缺陷，就是無論引用的是什么類型的對象，它都返回object，這時就要用到instanceof來檢測某個對象是不是另一個對象的實例2013-10-10
這篇文章主要介紹了javascript類型轉(zhuǎn)換的使用方法,包括轉(zhuǎn)換為字符串、轉(zhuǎn)換為數(shù)字、轉(zhuǎn)換為布爾值、轉(zhuǎn)換為對象使用方法，大家參考使用吧2014-02-02
這篇文章主要介紹了Python腳本后臺運行的幾種方式,linux下后臺運行、通過upstart方式實現(xiàn)、通過bash腳本實現(xiàn)、通過screen、tmux等方式實現(xiàn),需要的朋友可以參考下2015-03-03
Javascript MD4...2006-12-12
詳解JavaScript正則表達式中的global屬性的使用
這篇文章主要介紹了詳解JavaScript正則表達式中的global屬性的使用,是JS學(xué)習(xí)進階中的重要知識點,需要的朋友可以參考下2015-06-06
作為開發(fā)人員，Web頁面加載或刷新的速度對其網(wǎng)站至關(guān)重要。開發(fā)人員在各種瀏覽器中調(diào)試JavaScript的方法要少得多。比如，在Mozilla Firefox中，可以使用Firebug調(diào)試JavaScript，但仍然不能調(diào)整很多性能問題，如瀏覽器呈現(xiàn)消耗時間。2014-11-11
這篇文章主要介紹了javascript實現(xiàn)存儲hmtl字符串示例,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了JavaScript基本類型與引用類型詳解,講解了如類型的判斷、類型的轉(zhuǎn)換、類型的復(fù)制等內(nèi)容,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了JS之作用域和閉包的相關(guān)知識，文中講解非常詳細，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
THREE.JS入門教程(6)創(chuàng)建自己的全景圖實現(xiàn)步驟
Three.js是一個偉大的開源WebGL庫，WebGL允許JavaScript操作GPU，在瀏覽器端實現(xiàn)真正意義的3D,全景圖非?？?。使用Three.js做一個屬于自己的全景圖并不是那么困難,感興趣的朋友可以了解下啊，希望本文對你有所幫助2013-01-01