今天小編給大家分享一下JavaScript中預編譯怎么進行的相關知識點,內(nèi)容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務,包含不限于成都網(wǎng)站制作、網(wǎng)站設計、外貿(mào)網(wǎng)站建設、南部網(wǎng)絡推廣、重慶小程序開發(fā)、南部網(wǎng)絡營銷、南部企業(yè)策劃、南部品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等,從售前售中售后,我們都將竭誠為您服務,您的肯定,是我們最大的嘉獎;創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供南部建站搭建服務,24小時服務熱線:18982081108,官方網(wǎng)址:chinadenli.net
在代碼執(zhí)行前,編譯器會進行如下操作:
分詞。就是將代碼分成原子符號(token)
將token解析翻譯成AST(語法生成樹)。
遇到聲明語句,將會把聲明傳到作用域(scope)中創(chuàng)建綁定,分配內(nèi)存并將變量默認設為undefined或函數(shù)體。
然后就可以執(zhí)行代碼啦,執(zhí)行中途每次遇到賦值或者取值,都會從作用域中查找綁定。這樣看,是不是有點“預編譯”內(nèi)味了?但是實際上還是稱它為預處理更加貼切一點。接下來,讓我們來了解一波看起來最像預編譯的操作--第三步的干貨。
我的老師在和我講相關知識點前和我說過這么一個笑話:
面試時我因為這么一個問題掛了
var a = 100 function foo(){ console.log(a) } foo()
問:為什么輸出a的值是100?
答:因為100賦值給了a。
老師說完我頭昏腦漲,完全不明白笑點在哪,后來才知道這是在考察“預編譯”這方面的知識。
總的來說,“預編譯”可以分為
創(chuàng)建GO對象(global object) 發(fā)生在頁面加載完成時
創(chuàng)建AO對象(activation object) 發(fā)生在函數(shù)執(zhí)行前一刻
具體步驟如下:
全局預編譯
1. 創(chuàng)建GO對象
2. 找變量聲明,將變量聲明作為GO對象的屬性名,并賦值undefined
3. 找全局里的函數(shù)聲明,將函數(shù)名作為GO對象的屬性名,值賦予函數(shù)體
局部預編譯
1. 創(chuàng)建一個AO對象
2. 找形參和變量聲明,將形參和變量聲明作為AO對象的屬性名,值為undefined
3. 將實參和形參統(tǒng)一
4. 在函數(shù)體里找函數(shù)聲明,將函數(shù)名作為AO對象的屬性名,值賦予函數(shù)體
所以那個笑話里的面試問題我們應該這么回答:
首先,編譯器創(chuàng)建一個GO對象
找到變量聲明 var a
和函數(shù)聲明 function foo(){}
將上面兩個變量聲明作為GO的屬性名賦初值
GO{
a:undefined
foo:function(){}
}
然后運行第一行代碼 a=100
在GO中將100賦值給a
再執(zhí)行第五行代碼運行foo函數(shù)
創(chuàng)建一個AO對象
在函數(shù)體內(nèi)找變量聲明和形參,(無)
再在函數(shù)體內(nèi)找函數(shù)聲明(無)
所以
AO{
}
完成后運行第三行代碼,輸出a
先在AO對象中尋找a的值,發(fā)現(xiàn)不存在,向外部作用域擴展,在GO對象中尋找a,發(fā)現(xiàn)a的值為100
輸出100
當然,笑話里的題過于簡單,但是能讓我們清晰的了解到這個“預編譯”的進行
下面,我們來看一道面試題簡化版,練練手:
global = 100 function fn() { console.log(global); global = 200 console.log(global); var global = 300 } fn()
它的邏輯和輸出結果是多少呢?通過一步步的分析我們可以知道具體的分析應該是這樣的:
GO: { global: undefined => 100, fn: function() {} } global = 100 // 沒有聲明的變量默認為全局變量,也會放到GO中 function fn() { console.log(global); // 輸出undefined global = 200 console.log(global); // 輸出200 var global = 300 } AO: { global: undefined => 200 => 300 } fn()
以上就是“JavaScript中預編譯怎么進行”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站標題:JavaScript中預編譯怎么進行
瀏覽地址:http://chinadenli.net/article44/gicghe.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、營銷型網(wǎng)站建設、電子商務、網(wǎng)站收錄、響應式網(wǎng)站、云服務器
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)