淺析JavaScript中預編譯的原理與流程

更新時間：2023年10月26日 08:44:05 作者：時尚的綠茶

這篇文章主要為大家詳細介紹了JavaScript中預編譯的原理與流程的相關知識,文中的示例代碼講解詳細,對我們深入了解JavaScript有一定的幫助,感興趣的小伙伴可以跟隨小編一起學習一下

function test() {
    console.log('test');
}
test();
// 上面能執(zhí)行 
// 
test1();

function test1() {
    console.log('test1');
}
// 也能執(zhí)行，因為有預編譯的存在 發(fā)生了函數聲明提升
var a = 123;
console.log(a); // 123 
// 
console.log(b); //undefiend
var b = 123;

imply global 暗示全局變量：即任何變量，如果變量未經聲明就賦值，此變量就為全局對象(瀏覽器是window)所有。

全局對象和執(zhí)行環(huán)境有關系瀏覽器是window 、node里面是global

// 要明白 聲明 和 賦值 
var a = 123 //這句話其實兩步 聲明變量 和 變量賦值
// 可以拆解成下面這樣
var a;
a = 123
// 未經聲明的變量就賦值 歸全局對象
b = 10
// b=10 => window.b=10

（函數）預編譯的四部曲：

（函數）預編譯發(fā)生在函數執(zhí)行的前一刻

創(chuàng)建 AO 對象Activation Object(執(zhí)行期上下文，作用是理解的作用域，函數產生的執(zhí)行空間庫)

找形參和變量聲明，將變量和形參名作為AO屬性名，值為undefined (變量聲明提升)

相當于

AO{
a : undefined,
b : undefined
}

將實參值和形參統(tǒng)一（把實參值傳到形參里）

在函數體里面找函數聲明，值賦予函數體（先看自己的AO，再看全局的GO）（函數聲明提升）

// 
function fn(a) {
    console.log(a); //function a() {}
    var a = 123;
    console.log(a); //123
    function a() {}
    console.log(a); // 123
    var b = function() {}
    console.log(b); //function b() {}
    function d() {}
}
fn(1);

全局的預編譯三部曲

生成了一個GO的對象Global Object（瀏覽器就是window = GO）（沒有聲明就是賦值了，歸window所有，就是在GO里面預編譯）
找形參和變量聲明，將變量和形參名作為GO屬性名，值為undefined
在函數體里面找函數聲明，值賦予函數體

console.log(test); // function test(test){...}
function test(test) {
    console.log(test); // fuction test () {}
    var test = 234;
    console.log(test);
    234

    function test() {}
}
test(1);
var test = 123;
// 下面是模擬的流程
// 經過 go 三部曲 變成下面這樣
// 創(chuàng)建 GO ={
//   test : function test(test){...}
// }
// test(1) 執(zhí)行
// 經過函數預編譯四步
// 創(chuàng)建 AO ={
//  test:function test() {}
// }

預編譯注意

es5 作用域 =》全局作用域、函數作用域

es6 作用域 =》全局作用域、函數作用域、塊級作用域

es6出現了 塊級作用域 和 let 、 const 聲明變量不存在變量聲明提升，es6里面聲明函數也類似 let

用在塊級作用域中， let 、 const 將變量的作用域限制在塊內，還會出現暫時性死區(qū)

暫時性死區(qū)的本質就是，只要一進入當前作用域，所要使用的變量就已經存在了，但是不可獲取，只有等到聲明變量的那一行代碼出現，才可以獲取和使用該變量。

條件語句里面定義函數（例如：if里面定義函數 ）
注意：定義函數并不是函數賦值給變量有條件里面函數賦值給變量是不存在這個問題的
函數可以被有條件來聲明，這意味著，在一個 if 語句里，函數聲明是可以嵌套的。有的瀏覽器會將這種有條件的聲明看成是無條件的聲明，無論這里的條件是 true 還是 false，瀏覽器都會創(chuàng)建函數。因此，它們不應該被使用。
函數可以被有條件來聲明，這意味著，函數聲明可能出現在一個 if 語句里，但是，這種聲明方式在不同的瀏覽器里可能有不同的效果。因此，不應該在生產環(huán)境代碼中使用這種聲明方式，應該使用函數表達式來代替。
條件語句里面定義變量（例如：if里面使用var定義變量）

es5和es5之前的時候條件語句里面寫了函數聲明和變量聲明會提升到當前的作用域頂部（全局作用域、函數作用域）和上面的預編譯沒有區(qū)別 這時候沒有塊級作用域

es6和es6之后的時候條件語句里面寫了函數聲明和變量聲明遵循下面幾點（為了兼容以前老代碼）由于ES5 規(guī)定，函數只能在頂層作用域和函數作用域之中聲明，不能在塊級作用域聲明。

// 根據 ES5 的規(guī)定都是非法的。 在現在es6的執(zhí)行環(huán)境中 {}是塊級作用域 
// 這就矛盾了es5明確規(guī)定 函數只能在頂層作用域和函數作用域之中聲明，不能在塊級作用域聲明。

// 情況一
if (true) {
    function f() {}
}
// 情況二
try {
    function f() {}
} catch (e) {
    // ...
}

但是，瀏覽器沒有遵守這個規(guī)定，為了兼容以前的舊代碼，還是支持在塊級作用域之中聲明函數，因此上面兩種情況實際都能運行，不會報錯。

所以ES6 引入了塊級作用域，明確允許在塊級作用域之中聲明函數。ES6 規(guī)定，塊級作用域之中，函數聲明語句的行為類似于let，在塊級作用域之外不可引用。

//  ES5 環(huán)境中運行
function f() {
    console.log('I am outside!');
}
(function() {
    if (false) { //不管這里是true還是false 結果一樣的 發(fā)生預編譯的時候不管執(zhí)行條件
        // 重復聲明一次函數f
        function f() {
            console.log('I am inside!');
        }
    }

    f(); //會得到“I am inside!”，
}());

// 瀏覽器的 ES6 環(huán)境
console.log(foo);
if (false) {
    function foo() {
        return 1;
    }
}
// 在 Chrome 里：
// 'foo' 變量名被提升，但是 typeof foo 為 undefined
//
// 在 Firefox 里：
// 'foo' 變量名被提升。但是 typeof foo 為 undefined
//
// 在 Edge 里：
// 'foo' 變量名未被提升。而且 typeof foo 為 undefined
//
// 在 Safari 里：
// 'foo' 變量名被提升。而且 typeof foo 為 function

// 瀏覽器的 ES6 環(huán)境
// 根據下面 規(guī)則只對 ES6 的瀏覽器實現有效 分析
function f() {
    console.log('I am outside!');
}
(function() {
    // 函數作用域 AO { f = undefiend} 這里是if里面的函數提升上來的
    if (false) { //false true都不影響提升
        //es6 {} 這是一個塊級作用域了 因為塊級作用域內聲明的函數類似于let
        // 重復聲明一次函數f
        // 塊作用域  預編譯 AO{ f:function f() {...}}
        function f() {
            console.log('I am inside!');
        }
    }
    // 這里為什么會報錯 如果改變了塊級作用域內聲明的函數的處理規(guī)則，顯然會對老代碼產生很大影響。為了減輕因此產生的不兼容問題，ES6 在附錄 B里面規(guī)定，瀏覽器的實現可以不遵守上面的規(guī)定，有自己的行為方式。
    f(); //報錯 Uncaught TypeError: f is not a function  當執(zhí)行到這里的時候 由于if是flase 沒有執(zhí)行到f函數聲明語句 不會吧 塊里面的f 賦值到 函數作用域里面的 f  所以執(zhí)行函數作用域f報錯
}());

下面規(guī)則只對 ES6 的瀏覽器實現有效

允許在塊級作用域內聲明函數。
函數聲明類似于var，即會提升到全局作用域或函數作用域的頭部。（這里類似var 所以提升到全局作用域或函數作用域的頭部變量=undefiend 不同瀏覽器也不一樣 Safari里面是 function）
同時，函數聲明還會提升到所在的塊級作用域的頭部。(這里是函數聲明提升所以這個變量在塊級作用域的頭部變量=函數體)
當執(zhí)行到塊里面的函數聲明語句或者var聲明會把當前塊里面這個函數聲明變量或者var聲明變量的值賦值給之前提升到(全局作用域、函數作用域)里面的變量

// 例1
// GO={a:undefiend}
var a = 0;
// GO={a:0}
console.log("1 a:", a); //0
// GO:{a=1} 是if里面執(zhí)行到 定義function a() {} 的時候更改的
if (true) {
    // AO={a:function a() {}}
    a = 1;
    //  AO={a:1}
    function a() {} //當執(zhí)行到這一步的時候 將當前塊作用域的 a = 1  賦值給 全局作用域的 a 
    //  AO={a:1}
    //  GO:{a=1}
    a = 5;
    //  AO={a:5}
    console.log("2 a:", a); //5
}
console.log("3 a:", a); //1

// 例2
var a = 0;
console.log("1 a:", a); //0
if (true) {
    a = 1;
    a = 5;
    console.log("2 a:", a); //5
    function a() {}
}
console.log("3 a:", a); //5

// 例3
var a = 0;
console.log("1 a:", a); //0
if (true) {
    function a() {}
    a = 1;
    a = 5;
    console.log("2 a:", a); //5
}
console.log("3 a:", a); //function a {}

// 例4
// GO={a:undefiend}
console.log("1 a:", a); //undefiend
// GO={a:function a() {} } 是if里面執(zhí)行到 定義function a() {} 的時候更改的
if (true) {
    // AO={a: function a() {} }
    function a() {} //執(zhí)行到這里 改變GO={a=AO.a=function a() {}}
    a = 1;
    // AO={a: 1 }
    a = 5;
    // AO={a: 5 }
    console.log("2 a:", a); //5
}
console.log("3 a:", a); //function a {}

// 例5 - 里面是var聲明不是函數 
// GO={a:undefiend}
console.log("1 a:", a); //undefiend
// GO:{a=1} 是if里面執(zhí)行到 var a; 的時候更改的
if (true) {
    // AO={a:undefind}
    a = 1;
    //  AO={a:1}
    var a; //當執(zhí)行到這一步的時候 將當前塊作用域的 a = 1  賦值給 全局作用域的 a 
    //  AO={a:1}
    a = 5;
    //  AO={a:5}
    console.log("2 a:", a); //5
}
console.log("3 a:", a); //1

// 例6 - 里面是var聲明不是函數 
// GO={a:undefiend}
console.log("1 a:", a); //undefiend
if (false) { //false 走不進來 只是預編譯的時候將 var a 提升到塊頂部和全局頂部
    // AO={a:undefind}
    a = 1;
    var a;
    a = 5;
    console.log("2 a:", a); //5
}
console.log("3 a:", a); //undefiend

到此這篇關于淺析JavaScript中預編譯的原理與流程的文章就介紹到這了,更多相關JavaScript預編譯內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: