国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JS代碼運(yùn)行過(guò)程簡(jiǎn)述（一）

April / 1489人閱讀

摘要：是動(dòng)態(tài)語(yǔ)言，任何一段代碼在執(zhí)行之前都需要編譯，它跟傳統(tǒng)的語(yǔ)言不同，它不是提前編譯的，編譯結(jié)果也不能在分布式系統(tǒng)中進(jìn)行移植。通過(guò)特定方法將的轉(zhuǎn)化為一組機(jī)器指令，用來(lái)創(chuàng)建一個(gè)叫作的變量包括內(nèi)存分配等，并將一個(gè)值存儲(chǔ)到中。

JS 是動(dòng)態(tài)語(yǔ)言，任何一段代碼在執(zhí)行之前都需要編譯，它跟傳統(tǒng)的語(yǔ)言不同，它不是提前編譯的，編譯結(jié)果也不能在分布式系統(tǒng)中進(jìn)行移植。
但是JS引擎進(jìn)行編譯的步驟和傳統(tǒng)的編譯語(yǔ)言非常相似，在某些環(huán)節(jié)可能比預(yù)想的要復(fù)雜。

傳統(tǒng)的編譯

分詞/詞法分析（Tokenizing/Lexing）
這個(gè)過(guò)程會(huì)將由字符串組成的字符串分解成（對(duì)編程語(yǔ)言來(lái)說(shuō)）有意義的代碼塊，這些代碼塊被稱為詞法單元（token）

e.g. var a = 2;
通常會(huì)被解析成var 、a、=、2、;
空格是否被當(dāng)做此法單元，取決于空格在這門語(yǔ)言中是否具有意義

解析/語(yǔ)法分析（Parsing）
這個(gè)過(guò)程是將詞法單元流（數(shù)組）轉(zhuǎn)換成一個(gè)由元素逐級(jí)嵌套所組成的代表了程序語(yǔ)法結(jié)構(gòu)的樹（抽象語(yǔ)法樹，Abstract Syntax Tree, AST）

var a = 2;

VariableDeclaration
|
|------ a
|------AssignmentExpression
    |-----2

代碼生成
將AST轉(zhuǎn)換成可執(zhí)行代碼的過(guò)程。

var a = 2;
通過(guò)特定方法將var = 2;的AST轉(zhuǎn)化為一組機(jī)器指令，用來(lái)創(chuàng)建一個(gè)叫作a的變量（包括內(nèi)存分配等），并將一個(gè)值存儲(chǔ)到a中。

JS 編譯

JS 的編譯步驟和傳統(tǒng)還是非常相似的，只是某些環(huán)節(jié)比較復(fù)雜，這里我詳細(xì)說(shuō)一下“預(yù)編譯”，其他三個(gè)步驟同傳統(tǒng)的編譯

分詞/詞法分析（Tokenizing/Lexing）

解析/語(yǔ)法分析（Parsing）

預(yù)編譯
首先先看一個(gè)例子：

function a(b) {    
      alert(b); 
    function b() {            
        alert(b);       
    }        
    b();    
}    
a(1);

答案先不說(shuō)， 現(xiàn)在看具體的預(yù)編譯過(guò)程：

預(yù)編譯--全局
1). 創(chuàng)建Global Object對(duì)象（GO）

2). 查找變量聲明

-> 如果GO上還沒有該屬性，則添加該屬性，值為undefined  
-> 如果GO上已經(jīng)有該屬性，則不做任何處理

3). 查找函數(shù)聲明（eg. function foo () {}）

-> 如果GO上還沒有foo屬性，則把函數(shù)賦值給foo屬性  
 -> 如果GO上已經(jīng)存在foo屬性，則直接覆蓋

預(yù)編譯--函數(shù)
1). 函數(shù)運(yùn)行前的一瞬間，生成Activation Object（活動(dòng)對(duì)象），簡(jiǎn)稱AO

2). 分析參數(shù)

 -> 把聲明的參數(shù)形成AO的屬性，值全為undefined  
 -> 接收實(shí)參，形成AO相應(yīng)屬性的值

3). 分析變量聲明

 -> 如果AO上還沒有該屬性，則添加該屬性，值為undefined  
 -> 如果AO上已經(jīng)有該屬性，則不做任何處理

4). 分析函數(shù)聲明（eg. function foo () {}）

 -> 如果AO上還沒有foo屬性，則把函數(shù)賦值給foo屬性  
 -> 如果AO上已經(jīng)存在foo屬性，則直接覆蓋

代碼生成
JS執(zhí)行過(guò)程簡(jiǎn)單的介紹完了，Do you get it?, 下面看之前例子分析：

function a(b) {    
      alert(b); 
    function b() {            
        alert(b);       
    }        
    b();    
}    
a(1);


// 分析如下
/*
 * 1. 創(chuàng)建GO對(duì)象（包含JS全局對(duì)象的內(nèi)置對(duì)象Math、String、Date、etc）
 * 2. 查找變量聲明，沒有
 * 3. 查找函數(shù)聲明，定義函數(shù)a, GO = {a: function () {}}
 * 4. 執(zhí)行a(1)
 * // 以下為函數(shù)a運(yùn)行前的編譯
 * 5. 創(chuàng)建活動(dòng)對(duì)象AO  AO={this, arguments}
 * 6. 分析形參 AO = {this, arguments, b: undefined}
 * 7. 接收實(shí)參 AO = {this, arguments, b: 1}
 * 8. 分析變量聲明 AO = {this, arguments, b: 1}
 * 9. 分析函數(shù)聲明 
     AO = {
         this
         argunments,
         b: function () {}
     }
 
 * // 執(zhí)行
 * alert(b)  // function () { ... }
 * b()   // function () { ... }
 */

從以上分析很清晰就能夠知道彈出兩個(gè)function，是不是很簡(jiǎn)單啊。其實(shí)在執(zhí)行b(),還有函數(shù)b也要編譯哦，編譯步驟同函數(shù)a,這里就不做分析了。
習(xí)題：

function a(b) {    
      alert(b); 
    b = function() {            
        alert(b);       
    }        
    b();    
}    
a(1);

自己試著分析一下，結(jié)果是1和function，你做對(duì)了么？難點(diǎn)：b = function () {}這個(gè)是一個(gè)賦值語(yǔ)句

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/83550.html

相關(guān)文章

  • JS每日一題：簡(jiǎn)述一下Vue.js的template編譯過(guò)程？

    摘要：?jiǎn)柡?jiǎn)述一下的編譯過(guò)程先上一張圖大致看一下整個(gè)流程從上圖中我們可以看到是從后開始進(jìn)行中整體邏輯分為三個(gè)部分解析器將模板字符串轉(zhuǎn)換成優(yōu)化器對(duì)進(jìn)行靜態(tài)節(jié)點(diǎn)標(biāo)記，主要用來(lái)做虛擬的渲染優(yōu)化代碼生成器使用生成函數(shù)代碼字符串開始前先解釋一下抽象 20190215問 簡(jiǎn)述一下Vue.js的template編譯過(guò)程？ 先上一張圖大致看一下整個(gè)流程showImg(https://image-static....

    NicolasHe 評(píng)論0 收藏0

  • 前端面試分享: 兩年經(jīng)驗(yàn)社招-阿里巴巴

    摘要：作者兩年經(jīng)驗(yàn)第一家任職的是個(gè)小公司第二家算是二線互聯(lián)網(wǎng)公司各待了一年吧能有機(jī)會(huì)去阿里面試很驚喜先來(lái)和大家分享一下面試經(jīng)歷電話面試初探因?yàn)檫€在職的緣故電話面試從晚上點(diǎn)鐘開始持續(xù)了半個(gè)小時(shí)左右一開始的時(shí)候特比緊張甚至聲音略有些顫抖簡(jiǎn)單自我介紹做 作者兩年經(jīng)驗(yàn), 第一家任職的是個(gè)小公司, 第二家算是二線互聯(lián)網(wǎng)公司, 各待了一年吧... 能有機(jī)會(huì)去阿里面試很驚喜! 先來(lái)和大家分享一下面試經(jīng)歷....

    JowayYoung 評(píng)論0 收藏0

  • AngularJS簡(jiǎn)述

    流行框架 簡(jiǎn)介 angularjs是一款非常優(yōu)秀的前端高級(jí)JS框架，由谷歌團(tuán)隊(duì)開發(fā)維護(hù)，能夠快速構(gòu)建單頁(yè)web應(yīng)用，化繁為簡(jiǎn) 無(wú)論是angularjs還是jQuery都是用原生JS封裝的 庫(kù)：對(duì)代碼進(jìn)行封裝，調(diào)用封裝的方法，簡(jiǎn)化操作 傳統(tǒng)方式是用get方式獲取元素，然后點(diǎn)方法 jQuery庫(kù)實(shí)現(xiàn)了對(duì)獲取方式的封裝，對(duì)方法的封裝 框架：提供代碼書寫規(guī)則，按照規(guī)則去寫代碼，框架會(huì)幫我們實(shí)現(xiàn)響應(yīng)的功能...

    Jason 評(píng)論0 收藏0

  • 一個(gè)網(wǎng)頁(yè)的形成過(guò)程

    摘要：一個(gè)網(wǎng)頁(yè)從我們輸入網(wǎng)址到打開經(jīng)歷了以下步驟。如果沒有或記錄已經(jīng)過(guò)期，則向域名解析服務(wù)器發(fā)送解析請(qǐng)求。服務(wù)器收到請(qǐng)求，產(chǎn)生響應(yīng)，并將網(wǎng)頁(yè)發(fā)送給負(fù)載均衡服務(wù)器。負(fù)載均衡服務(wù)器將網(wǎng)頁(yè)傳遞給鏈處理，之后發(fā)回給我們的瀏覽器。 一個(gè)網(wǎng)頁(yè)從我們輸入網(wǎng)址到打開經(jīng)歷了以下步驟。 showImg(https://segmentfault.com/img/bVbpfj2?w=232&h=555); DNS...

    WelliJhon 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<