JavaScript預(yù)編譯和執(zhí)行過(guò)程詳解
javascript相對(duì)于其它語(yǔ)言來(lái)說(shuō)是一種弱類(lèi)型的語(yǔ)言，在其它如java語(yǔ)言中，程序的執(zhí)行需要有編譯的階段，而在javascript中也有類(lèi)似的“預(yù)編譯階段”（javascript的預(yù)編譯是以代碼塊為范圍<script></script>，即每遇到一個(gè)代碼塊都會(huì)進(jìn)行預(yù)編譯>執(zhí)行），了解javascript引擎的執(zhí)行機(jī)理，將有助于在寫(xiě)js代碼過(guò)程中的思路總結(jié)。
首先javascript是解釋型語(yǔ)言，自然就是編譯一行，執(zhí)行一行。
js運(yùn)行過(guò)程分為三步：
1、語(yǔ)法分析
2、預(yù)編譯
3、解釋執(zhí)行
語(yǔ)法分析就是指js引擎去判斷檢查你的代碼是否存在語(yǔ)法錯(cuò)誤，解釋執(zhí)行更不用多說(shuō)，自然就是執(zhí)行你的代碼，然而重中之重的是預(yù)編譯，預(yù)編譯簡(jiǎn)單理解就是在內(nèi)存中開(kāi)辟一些空間，存放一些變量與函數(shù) 。
理解預(yù)編譯首先要明白函數(shù)聲明和變量賦值：
javascript中的兩種聲明方式，var和function，前者聲明的是變量，后者聲明的是方法。
在預(yù)編譯中，javascript對(duì)這兩種聲明做出了兩種處理方案:
<script>
var a = "1"; //聲明變量a
function b() { //聲明方法b
alert();
}
var c = function () { //聲明變量c
alert();
}
</script>以上代碼塊中，a、c為變量賦值，b為函數(shù)聲明，當(dāng)執(zhí)行以上的代碼時(shí)，首先會(huì)進(jìn)入預(yù)編譯階段，對(duì)與變量賦值a、c會(huì)在內(nèi)存中開(kāi)辟一塊內(nèi)存空間并指向變量名，且賦值為undefined
預(yù)編譯(函數(shù)執(zhí)行前)
1. 創(chuàng)建AO對(duì)象（Active Object）
2. 查找函數(shù)形參及函數(shù)內(nèi)變量聲明，形參名及變量名作為AO對(duì)象的屬性，值為undefined
3. 實(shí)參形參相統(tǒng)一，實(shí)參值賦給形參
4. 查找函數(shù)聲明，函數(shù)名作為AO對(duì)象的屬性，值為函數(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對(duì)象
AO{
}2)、查找函數(shù)形參及函數(shù)內(nèi)變量聲明，形參名及變量名作為AO對(duì)象的屬性，值為undefined
AO{
a:undefined,
b:undefined,
}3)、實(shí)參形參相統(tǒng)一，實(shí)參值賦給形參
AO{
a:1,
b:undefined,
}4)、查找函數(shù)聲明，函數(shù)名作為AO對(duì)象的屬性，值為函數(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之前時(shí): 此時(shí) console.log(a)打印的值為: function a() {}
AO{
a:function a() {
},
b:undefined,
d:function d() {
}
}當(dāng)執(zhí)行到a=123時(shí): 此時(shí) console.log(a)打印的值為: 123 123
AO{
a:123,
b:undefined,
d:function d() {
}
}當(dāng)執(zhí)行到b = function () {}時(shí)：
此時(shí) 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對(duì)象
AO{
}2)、查找函數(shù)形參及函數(shù)內(nèi)變量聲明，形參名及變量名作為AO對(duì)象的屬性，值為undefined
AO{
a:undefined,
b:undefined,
c:undefined
}3)、實(shí)參形參相統(tǒng)一，實(shí)參值賦給形參
AO{
a:1,
b:undefined,
c:undefined
}4)、查找函數(shù)聲明，函數(shù)名作為AO對(duì)象的屬性，值為函數(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() {}之前時(shí): 此時(shí) console.log(a)打印的值為: 1
AO{
a:1,
b:function b() {
},
c:undefined,
d:function d() {
}
}當(dāng)執(zhí)行到b=2之前時(shí): 此時(shí) 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對(duì)象
AO{
}2)、查找函數(shù)形參及函數(shù)內(nèi)變量聲明，形參名及變量名作為AO對(duì)象的屬性，值為undefined
AO{
a:undefined,
b:undefined
}3)、實(shí)參形參相統(tǒng)一，實(shí)參值賦給形參
AO{
a:1,
b:undefined
}4)、查找函數(shù)聲明，函數(shù)名作為AO對(duì)象的屬性，值為函數(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() {}時(shí):
此時(shí) console.log(a)打印的值為: function a() {}
console.log(b)打印的值為: undefined
AO{
a:function a() {
},
b:undefined
}當(dāng)執(zhí)行到 b=234時(shí): 此時(shí) console.log(b)打印的值為: 234
AO{
a:function a() {
},
b:234
}當(dāng)執(zhí)行到 a=123時(shí): 此時(shí) console.log(a)打印的值為: 123
AO{
a:123,
b:234
}當(dāng)執(zhí)行到 b=456 時(shí)
AO{
a:123,
b:456
}當(dāng)執(zhí)行到 b = function () {}時(shí):
此時(shí) console.log(a)打印的值為: 123
console.log(b)打印的值為: function () {}
AO{
a:123,
b:function () {
}
}瀏覽器執(zhí)行結(jié)果:
到此這篇關(guān)于JavaScript預(yù)編譯和執(zhí)行過(guò)程的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
文件作為一種特殊的表單數(shù)據(jù)，通過(guò)http post請(qǐng)求方式提交至服務(wù)器的時(shí)候，php會(huì)生成一個(gè)$_FILES全局?jǐn)?shù)組，相關(guān)的文件信息會(huì)存放在這個(gè)全局?jǐn)?shù)組中。我將在這篇文章中通過(guò)一些示例代碼來(lái)闡述php下的文件上傳，并且深入看下關(guān)于文件上傳內(nèi)部的實(shí)現(xiàn)機(jī)制，最后簡(jiǎn)單說(shuō)下如何加強(qiáng)這方面的安全性!2014-04-04
JavaScript中window、doucment、body的解釋
JavaScript中window、doucment、body是什么意思呢，下面為大家做個(gè)介紹，不知道的朋友可以參考下2013-08-08
這篇文章主要介紹了DOM基礎(chǔ)教程之使用DOM控制表格的相關(guān)資料,需要的朋友可以參考下2015-01-01
對(duì)象是一種復(fù)合值，它將很多值（原始值或其他對(duì)象）聚合在一起，可通過(guò)屬性名訪問(wèn)這些值。而屬性名可以是包含空字符串在內(nèi)的任意字符串。JavaScript對(duì)象也可以稱作一種數(shù)據(jù)結(jié)構(gòu)2016-07-07
這篇文章主要介紹了微信分享通用組件，用于微信瀏覽器內(nèi)瀏覽網(wǎng)頁(yè)的分享信息定義,需要的朋友可以參考下2014-03-03
JavaScript 學(xué)習(xí)初步 入門(mén)教程
看了《21天學(xué)習(xí)JavaScript》的視頻教程，感覺(jué)就是語(yǔ)法好熟悉，和C++類(lèi)似，和C#類(lèi)似，和Java類(lèi)似！幡然悔悟這些語(yǔ)言的語(yǔ)法都是類(lèi)似的，數(shù)據(jù)類(lèi)型，對(duì)象方法（或者稱之為函數(shù)，由于我是個(gè)菜鳥(niǎo)所以也數(shù)不清楚到底是什么）。2010-03-03
JavaScript中prototype為對(duì)象添加屬性的誤區(qū)介紹
prototype為對(duì)象添加屬性的的過(guò)程中有些誤區(qū)，在本文將為大家詳細(xì)介紹下，感興趣的朋友可不要錯(cuò)過(guò)2013-10-10
javascript 打開(kāi)頁(yè)面window.location和window.open的區(qū)別
有時(shí)候需要用js來(lái)實(shí)現(xiàn)頁(yè)面的打開(kāi)，因?yàn)閖s下有window.location和window.open的不同實(shí)現(xiàn)方法，下面來(lái)簡(jiǎn)單的說(shuō)明下區(qū)別。2010-03-03
js比較和邏輯運(yùn)算符的介紹，需要的朋友可以參考一下2013-03-03
這篇文章主要介紹了詳解JavaScript中Date.UTC()方法的使用,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06