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

資訊專欄INFORMATION COLUMN

5分鐘讀懂JavaScript預編譯流程

Baoyuan / 2005人閱讀

摘要：大家都知道是解釋型語言，既然是解釋型語言，就是編譯一行，執行一行，那又何來預編譯一說呢腳本執行引擎都做了什么呢今天我們就來看看吧。全局域就是一切聲明的全局變量，全是的屬性等同于函數預編譯發生在函數執行前一刻。

大家都知道JavaScript是解釋型語言，既然是解釋型語言，就是編譯一行，執行一行，那又何來預編譯一說呢?腳本執行js引擎都做了什么呢？今天我們就來看看吧。
1-JavaScript運行三部曲

語法分析

預編譯

解釋執行

語法分析很簡單，就是引擎檢查你的代碼有沒有什么低級的語法錯誤； 解釋執行顧名思義便是執行代碼了； 預編譯簡單理解就是在內存中開辟一些空間，存放一些變量與函數 ；

2-JS預編譯什么時候發生

預編譯到底什么時候發生? 誤以為預編譯僅僅發生在script內代碼塊執行前 這倒并沒有錯 預編譯確確實實在script代碼內執行前發生了 但是它大部分會發生在函數執行前

3-實例分析

先來區分理解一下這2個概念： 變量聲明 var ... 函數聲明 function(){}

分析過程如下：

頁面產生便創建了GO全局對象（Global Object）（也就是window對象）；

第一個腳本文件加載；

腳本加載完畢后，分析語法是否合法；

開始預編譯 查找變量聲明，作為GO屬性，值賦予undefined； 查找函數聲明，作為GO屬性，值賦予函數體；

預編譯
//抽象描述
    GO/window = {
        a: undefined,
        c: undefined，
        test: function(a) {
            console.log(a);
            var a = 123;
            console.log(a);
            function a() {}
            console.log(a);
            var b = function() {}
            console.log(b);
            function d() {}
        }
    }
解釋執行代碼（直到執行調用函數test(2)語句）
//抽象描述
    GO/window = {
        a: 1,
        c: function (){
            console.log("I at C function");
        }
        test: function(a) {
            console.log(a);
            var a = 123;
            console.log(a);
            function a() {}
            console.log(a);
            var b = function() {}
            console.log(b);
            function d() {}
        }
    }
執行函數test()之前，發生預編譯

創建AO活動對象（Active Object）；

查找形參和變量聲明，值賦予undefined；

實參值賦給形參；

查找函數聲明，值賦予函數體；

預編譯之前面1、2兩小步如下：
//抽象描述
    AO = {
        a:undefined,
        b:undefined,
    }
預編譯之第3步如下：
//抽象描述
        AO = {
            a:2,
            b:undefined,
        }
預編譯之第4步如下：
//抽象描述
    AO = {
        a:function a() {},
        b:undefined
        d:function d() {}
    }
執行test()函數時如下過程變化：
//抽象描述
    AO = {
        a:function a() {},
        b:undefined
        d:function d() {}
    }
    --->
    AO = {
        a:123,
        b:undefined
        d:function d() {}
    }
    --->
    AO = {
        a:123,
        b:function() {}
        d:function d() {}
    }
執行結果：

注意：

預編譯階段發生變量聲明和函數聲明，沒有初始化行為（賦值），匿名函數不參與預編譯 ； 只有在解釋執行階段才會進行變量初始化 ；

預編譯(函數執行前)

創建AO對象（Active Object）

查找函數形參及函數內變量聲明，形參名及變量名作為AO對象的屬性，值為undefined

實參形參相統一，實參值賦給形參

查找函數聲明，函數名作為AO對象的屬性，值為函數引用

預編譯(腳本代碼塊script執行前)

查找全局變量聲明（包括隱式全局變量聲明，省略var聲明），變量名作全局對象的屬性，值為undefined

查找函數聲明，函數名作為全局對象的屬性，值為函數引用

預編譯小結

預編譯兩個小規則

函數聲明整體提升-(具體點說，無論函數調用和聲明的位置是前是后，系統總會把函數聲明移到調用前面）

變量 聲明提升-(具體點說，無論變量調用和聲明的位置是前是后，系統總會把聲明移到調用前，注意僅僅只是聲明，所以值是undefined）

預編譯前奏

imply global 即任何變量，如果未經聲明就賦值，則此變量就位全局變量所有。(全局域就是Window)

一切聲明的全局變量，全是window的屬性； var a = 12;等同于Window.a = 12;

函數預編譯發生在函數執行前一刻。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101369.html

相關文章

  • 【干貨】十分鐘讀懂瀏覽器渲染流程

    摘要：部分讀者向我反饋對于最后的瀏覽器渲染布局這塊不是很清晰，所以本文就瀏覽器渲染流程單獨開篇講解，希望大家都能有新的收獲。瀏覽器主要組件結構瀏覽器主要組件渲染引擎和使用自主研發的渲染引擎。所以瀏覽器的渲染過程主要包括以下幾步解析生成樹。 在之前寫過的一篇《天龍八步細說瀏覽器輸入URL后發生了什么》一文中，和大家分享了從在瀏覽器中輸入網址URL到最終頁面展示的整個過程。部分讀者向我反饋對于最...

    Warren 評論0 收藏0

  • 【干貨】十分鐘讀懂瀏覽器渲染流程

    摘要：部分讀者向我反饋對于最后的瀏覽器渲染布局這塊不是很清晰，所以本文就瀏覽器渲染流程單獨開篇講解，希望大家都能有新的收獲。瀏覽器主要組件結構瀏覽器主要組件渲染引擎和使用自主研發的渲染引擎。所以瀏覽器的渲染過程主要包括以下幾步解析生成樹。 在之前寫過的一篇《天龍八步細說瀏覽器輸入URL后發生了什么》一文中，和大家分享了從在瀏覽器中輸入網址URL到最終頁面展示的整個過程。部分讀者向我反饋對于最...

    lanffy 評論0 收藏0

  • 【干貨】十分鐘讀懂瀏覽器渲染流程

    摘要：部分讀者向我反饋對于最后的瀏覽器渲染布局這塊不是很清晰，所以本文就瀏覽器渲染流程單獨開篇講解，希望大家都能有新的收獲。瀏覽器主要組件結構瀏覽器主要組件渲染引擎和使用自主研發的渲染引擎。所以瀏覽器的渲染過程主要包括以下幾步解析生成樹。 在之前寫過的一篇《天龍八步細說瀏覽器輸入URL后發生了什么》一文中，和大家分享了從在瀏覽器中輸入網址URL到最終頁面展示的整個過程。部分讀者向我反饋對于最...

    Heier 評論0 收藏0

  • 【前端】重構方案了解一下

    摘要：定義公共組件供各模塊或特定場景調用，復用度高第三方庫組件插件庫用于解決以下版本瀏覽器對新增標簽不識別，并導致不起作用的問題。 前端重構方案 前言 前端技術發展很快，很多項目面臨前端部分重構，很開心可以讓我進行這次項目前端的重構方案編寫，在思考的同時參考了網上很多資料，希望本篇重構方案有一定的完整性，可以帶給大家一些在面臨重構時有用的東西，同時希望路過的大牛小牛不領賜教，能給我略微指點...

    ningwang 評論0 收藏0

發表評論

0條評論

Baoyuan

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<