資訊專欄INFORMATION COLUMN
摘要：是動態(tài)語言，任何一段代碼在執(zhí)行之前都需要編譯，它跟傳統(tǒng)的語言不同，它不是提前編譯的，編譯結果也不能在分布式系統(tǒng)中進行移植。通過特定方法將的轉化為一組機器指令，用來創(chuàng)建一個叫作的變量包括內存分配等，并將一個值存儲到中。
JS 是動態(tài)語言，任何一段代碼在執(zhí)行之前都需要編譯，它跟傳統(tǒng)的語言不同，它不是提前編譯的，編譯結果也不能在分布式系統(tǒng)中進行移植。
但是JS引擎進行編譯的步驟和傳統(tǒng)的編譯語言非常相似，在某些環(huán)節(jié)可能比預想的要復雜。
分詞/詞法分析（Tokenizing/Lexing）
這個過程會將由字符串組成的字符串分解成（對編程語言來說）有意義的代碼塊，這些代碼塊被稱為詞法單元（token）
e.g. var a = 2;
通常會被解析成var 、a、=、2、;
空格是否被當做此法單元，取決于空格在這門語言中是否具有意義
解析/語法分析（Parsing）
這個過程是將詞法單元流（數組）轉換成一個由元素逐級嵌套所組成的代表了程序語法結構的樹（抽象語法樹，Abstract Syntax Tree, AST）
var a = 2;
VariableDeclaration
|
|------ a
|------AssignmentExpression
|-----2
代碼生成
將AST轉換成可執(zhí)行代碼的過程。
var a = 2;
通過特定方法將var = 2;的AST轉化為一組機器指令，用來創(chuàng)建一個叫作a的變量（包括內存分配等），并將一個值存儲到a中。
JS 的編譯步驟和傳統(tǒng)還是非常相似的，只是某些環(huán)節(jié)比較復雜，這里我詳細說一下“預編譯”，其他三個步驟同傳統(tǒng)的編譯
分詞/詞法分析（Tokenizing/Lexing）
解析/語法分析（Parsing）
預編譯
首先先看一個例子：
function a(b) {
alert(b);
function b() {
alert(b);
}
b();
}
a(1);
答案先不說， 現在看具體的預編譯過程：
預編譯--全局
1). 創(chuàng)建Global Object對象（GO）
2). 查找變量聲明
-> 如果GO上還沒有該屬性，則添加該屬性，值為undefined -> 如果GO上已經有該屬性，則不做任何處理
3). 查找函數聲明（eg. function foo () {}）
-> 如果GO上還沒有foo屬性，則把函數賦值給foo屬性 -> 如果GO上已經存在foo屬性，則直接覆蓋
預編譯--函數
1). 函數運行前的一瞬間，生成Activation Object（活動對象），簡稱AO
2). 分析參數
-> 把聲明的參數形成AO的屬性，值全為undefined -> 接收實參，形成AO相應屬性的值
3). 分析變量聲明
-> 如果AO上還沒有該屬性，則添加該屬性，值為undefined -> 如果AO上已經有該屬性，則不做任何處理
4). 分析函數聲明（eg. function foo () {}）
-> 如果AO上還沒有foo屬性，則把函數賦值給foo屬性 -> 如果AO上已經存在foo屬性，則直接覆蓋
代碼生成
JS執(zhí)行過程簡單的介紹完了，Do you get it?, 下面看之前例子分析：
function a(b) {
alert(b);
function b() {
alert(b);
}
b();
}
a(1);
// 分析如下
/*
* 1. 創(chuàng)建GO對象（包含JS全局對象的內置對象Math、String、Date、etc）
* 2. 查找變量聲明，沒有
* 3. 查找函數聲明，定義函數a, GO = {a: function () {}}
* 4. 執(zhí)行a(1)
* // 以下為函數a運行前的編譯
* 5. 創(chuàng)建活動對象AO AO={this, arguments}
* 6. 分析形參 AO = {this, arguments, b: undefined}
* 7. 接收實參 AO = {this, arguments, b: 1}
* 8. 分析變量聲明 AO = {this, arguments, b: 1}
* 9. 分析函數聲明
AO = {
this
argunments,
b: function () {}
}
* // 執(zhí)行
* alert(b) // function () { ... }
* b() // function () { ... }
*/
從以上分析很清晰就能夠知道彈出兩個function，是不是很簡單啊。其實在執(zhí)行b(),還有函數b也要編譯哦，編譯步驟同函數a,這里就不做分析了。
習題：
function a(b) {
alert(b);
b = function() {
alert(b);
}
b();
}
a(1);
自己試著分析一下，結果是1和function，你做對了么？難點：b = function () {}這個是一個賦值語句
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/83550.html
摘要：問簡述一下的編譯過程先上一張圖大致看一下整個流程從上圖中我們可以看到是從后開始進行中整體邏輯分為三個部分解析器將模板字符串轉換成優(yōu)化器對進行靜態(tài)節(jié)點標記，主要用來做虛擬的渲染優(yōu)化代碼生成器使用生成函數代碼字符串開始前先解釋一下抽象 20190215問 簡述一下Vue.js的template編譯過程？ 先上一張圖大致看一下整個流程showImg(https://image-static....
摘要：作者兩年經驗第一家任職的是個小公司第二家算是二線互聯(lián)網公司各待了一年吧能有機會去阿里面試很驚喜先來和大家分享一下面試經歷電話面試初探因為還在職的緣故電話面試從晚上點鐘開始持續(xù)了半個小時左右一開始的時候特比緊張甚至聲音略有些顫抖簡單自我介紹做 作者兩年經驗, 第一家任職的是個小公司, 第二家算是二線互聯(lián)網公司, 各待了一年吧... 能有機會去阿里面試很驚喜! 先來和大家分享一下面試經歷....
流行框架 簡介 angularjs是一款非常優(yōu)秀的前端高級JS框架，由谷歌團隊開發(fā)維護，能夠快速構建單頁web應用，化繁為簡 無論是angularjs還是jQuery都是用原生JS封裝的 庫：對代碼進行封裝，調用封裝的方法，簡化操作 傳統(tǒng)方式是用get方式獲取元素，然后點方法 jQuery庫實現了對獲取方式的封裝，對方法的封裝 框架：提供代碼書寫規(guī)則，按照規(guī)則去寫代碼，框架會幫我們實現響應的功能...
閱讀 2598·2023-04-25 17:37
閱讀 1263·2021-11-24 10:29
閱讀 3790·2021-09-09 11:57
閱讀 772·2021-08-10 09:41
閱讀 2305·2019-08-30 15:55
閱讀 2874·2019-08-30 15:54
閱讀 2017·2019-08-30 15:53
閱讀 967·2019-08-30 15:43
