淺析JavaScript中預(yù)編譯的原理與流程
要了解 預(yù)編譯
首先要知道js運(yùn)行機(jī)制 js代碼運(yùn)行前會(huì)發(fā)生 下面三步
- 語法分析 (通篇掃描js文件 看看有沒有語法錯(cuò)誤)
- 預(yù)編譯 (解決執(zhí)行順序問題 )
- 解釋執(zhí)行 (解釋一行 執(zhí)行一行)
function test() { console.log('test'); } test(); // 上面能執(zhí)行 // test1(); function test1() { console.log('test1'); } // 也能執(zhí)行,因?yàn)橛蓄A(yù)編譯的存在 發(fā)生了函數(shù)聲明提升 var a = 123; console.log(a); // 123 // console.log(b); //undefiend var b = 123;
imply global 暗示全局變量:即任何變量,如果變量未經(jīng)聲明就賦值,此變量就為全局對(duì)象(瀏覽器是window)所有。
全局對(duì)象和執(zhí)行環(huán)境有關(guān)系 瀏覽器是window 、node里面是global
// 要明白 聲明 和 賦值 var a = 123 //這句話其實(shí)兩步 聲明變量 和 變量賦值 // 可以拆解成下面這樣 var a; a = 123 // 未經(jīng)聲明的變量就賦值 歸全局對(duì)象 b = 10 // b=10 => window.b=10
(函數(shù))預(yù)編譯的四部曲:
(函數(shù))預(yù)編譯發(fā)生在函數(shù)執(zhí)行的前一刻
創(chuàng)建 AO 對(duì)象Activation Object(執(zhí)行期上下文,作用是理解的作用域,函數(shù)產(chǎn)生的執(zhí)行空間庫(kù))
找形參和變量聲明,將變量和形參名作為AO屬性名,值為undefined (變量聲明提升)
相當(dāng)于
AO{
a : undefined,
b : undefined
}
將實(shí)參值和形參統(tǒng)一(把實(shí)參值傳到形參里)
在函數(shù)體里面找函數(shù)聲明,值賦予函數(shù)體 (先看自己的AO,再看全局的GO) (函數(shù)聲明提升)
// 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);
全局的預(yù)編譯三部曲
- 生成了一個(gè)GO的對(duì)象Global Object(瀏覽器就是window = GO) (沒有聲明就是賦值了,歸window所有,就是在GO里面預(yù)編譯)
- 找形參和變量聲明,將變量和形參名作為GO屬性名,值為undefined
- 在函數(shù)體里面找函數(shù)聲明,值賦予函數(shù)體
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; // 下面是模擬的流程 // 經(jīng)過 go 三部曲 變成下面這樣 // 創(chuàng)建 GO ={ // test : function test(test){...} // } // test(1) 執(zhí)行 // 經(jīng)過函數(shù)預(yù)編譯四步 // 創(chuàng)建 AO ={ // test:function test() {} // }
預(yù)編譯注意
es5 作用域 =》 全局作用域 、 函數(shù)作用域
es6 作用域 =》 全局作用域 、 函數(shù)作用域 、塊級(jí)作用域
es6出現(xiàn)了 塊級(jí)作用域
和 let
、 const
聲明變量不存在變量聲明提升,es6里面聲明函數(shù)也類似 let
用在塊級(jí)作用域中, let
、 const
將變量的作用域限制在塊內(nèi),還會(huì)出現(xiàn)暫時(shí)性死區(qū)
暫時(shí)性死區(qū)的本質(zhì)就是,只要一進(jìn)入當(dāng)前作用域,所要使用的變量就已經(jīng)存在了,但是不可獲取,只有等到聲明變量的那一行代碼出現(xiàn),才可以獲取和使用該變量。
- 條件語句里面定義函數(shù) (例如:if里面定義函數(shù) )
- 注意:定義函數(shù)并不是函數(shù)賦值給變量 有條件里面函數(shù)賦值給變量是不存在這個(gè)問題的
- 函數(shù)可以被有條件來聲明,這意味著,在一個(gè) if 語句里,函數(shù)聲明是可以嵌套的。有的瀏覽器會(huì)將這種有條件的聲明看成是無條件的聲明,無論這里的條件是 true 還是 false,瀏覽器都會(huì)創(chuàng)建函數(shù)。因此,它們不應(yīng)該被使用。
- 函數(shù)可以被有條件來聲明,這意味著,函數(shù)聲明可能出現(xiàn)在一個(gè) if 語句里,但是,這種聲明方式在不同的瀏覽器里可能有不同的效果。因此,不應(yīng)該在生產(chǎn)環(huán)境代碼中使用這種聲明方式,應(yīng)該使用函數(shù)表達(dá)式來代替。
- 條件語句里面定義變量(例如:if里面使用var定義變量)
es5和es5之前 的時(shí)候條件語句里面寫了函數(shù)聲明和變量聲明 會(huì)提升到當(dāng)前的作用域頂部(全局作用域 、 函數(shù)作用域)和上面的預(yù)編譯沒有區(qū)別 這時(shí)候沒有塊級(jí)作用域
es6和es6之后 的時(shí)候條件語句里面寫了函數(shù)聲明和變量聲明 遵循下面幾點(diǎn)(為了兼容以前老代碼)由于ES5 規(guī)定,函數(shù)只能在頂層作用域和函數(shù)作用域之中聲明,不能在塊級(jí)作用域聲明。
// 根據(jù) ES5 的規(guī)定都是非法的。 在現(xiàn)在es6的執(zhí)行環(huán)境中 {}是塊級(jí)作用域 // 這就矛盾了es5明確規(guī)定 函數(shù)只能在頂層作用域和函數(shù)作用域之中聲明,不能在塊級(jí)作用域聲明。 // 情況一 if (true) { function f() {} } // 情況二 try { function f() {} } catch (e) { // ... }
但是,瀏覽器沒有遵守這個(gè)規(guī)定,為了兼容以前的舊代碼,還是支持在塊級(jí)作用域之中聲明函數(shù),因此上面兩種情況實(shí)際都能運(yùn)行,不會(huì)報(bào)錯(cuò)。
所以ES6 引入了塊級(jí)作用域,明確允許在塊級(jí)作用域之中聲明函數(shù)。ES6 規(guī)定,塊級(jí)作用域之中,函數(shù)聲明語句的行為類似于let,在塊級(jí)作用域之外不可引用。
// ES5 環(huán)境中運(yùn)行 function f() { console.log('I am outside!'); } (function() { if (false) { //不管這里是true還是false 結(jié)果一樣的 發(fā)生預(yù)編譯的時(shí)候不管執(zhí)行條件 // 重復(fù)聲明一次函數(shù)f function f() { console.log('I am inside!'); } } f(); //會(huì)得到“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)境 // 根據(jù)下面 規(guī)則只對(duì) ES6 的瀏覽器實(shí)現(xiàn)有效 分析 function f() { console.log('I am outside!'); } (function() { // 函數(shù)作用域 AO { f = undefiend} 這里是if里面的函數(shù)提升上來的 if (false) { //false true都不影響提升 //es6 {} 這是一個(gè)塊級(jí)作用域了 因?yàn)閴K級(jí)作用域內(nèi)聲明的函數(shù)類似于let // 重復(fù)聲明一次函數(shù)f // 塊作用域 預(yù)編譯 AO{ f:function f() {...}} function f() { console.log('I am inside!'); } } // 這里為什么會(huì)報(bào)錯(cuò) 如果改變了塊級(jí)作用域內(nèi)聲明的函數(shù)的處理規(guī)則,顯然會(huì)對(duì)老代碼產(chǎn)生很大影響。為了減輕因此產(chǎn)生的不兼容問題,ES6 在附錄 B里面規(guī)定,瀏覽器的實(shí)現(xiàn)可以不遵守上面的規(guī)定,有自己的行為方式。 f(); //報(bào)錯(cuò) Uncaught TypeError: f is not a function 當(dāng)執(zhí)行到這里的時(shí)候 由于if是flase 沒有執(zhí)行到f函數(shù)聲明語句 不會(huì)吧 塊里面的f 賦值到 函數(shù)作用域里面的 f 所以執(zhí)行函數(shù)作用域f報(bào)錯(cuò) }());
下面規(guī)則只對(duì) ES6 的瀏覽器實(shí)現(xiàn)有效
- 允許在塊級(jí)作用域內(nèi)聲明函數(shù)。
- 函數(shù)聲明類似于var,即會(huì)提升到全局作用域或函數(shù)作用域的頭部。(這里類似
var
所以提升到全局作用域或函數(shù)作用域的頭部 變量=undefiend
不同瀏覽器也不一樣Safari
里面是function
) - 同時(shí),函數(shù)聲明還會(huì)提升到所在的塊級(jí)作用域的頭部。(這里是 函數(shù)聲明提升 所以這個(gè)變量在塊級(jí)作用域的頭部 變量=函數(shù)體)
- 當(dāng)執(zhí)行到塊里面的
函數(shù)聲明
語句或者var
聲明 會(huì)把當(dāng)前塊里面這個(gè)函數(shù)聲明變量
或者var聲明變量
的值賦值給之前提升到(全局作用域、函數(shù)作用域)里面的變量
// 例1 // GO={a:undefiend} var a = 0; // GO={a:0} console.log("1 a:", a); //0 // GO:{a=1} 是if里面執(zhí)行到 定義function a() {} 的時(shí)候更改的 if (true) { // AO={a:function a() {}} a = 1; // AO={a:1} function a() {} //當(dāng)執(zhí)行到這一步的時(shí)候 將當(dāng)前塊作用域的 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() {} 的時(shí)候更改的 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聲明不是函數(shù) // GO={a:undefiend} console.log("1 a:", a); //undefiend // GO:{a=1} 是if里面執(zhí)行到 var a; 的時(shí)候更改的 if (true) { // AO={a:undefind} a = 1; // AO={a:1} var a; //當(dāng)執(zhí)行到這一步的時(shí)候 將當(dāng)前塊作用域的 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聲明不是函數(shù) // GO={a:undefiend} console.log("1 a:", a); //undefiend if (false) { //false 走不進(jìn)來 只是預(yù)編譯的時(shí)候?qū)?var a 提升到塊頂部和全局頂部 // AO={a:undefind} a = 1; var a; a = 5; console.log("2 a:", a); //5 } console.log("3 a:", a); //undefiend
到此這篇關(guān)于淺析JavaScript中預(yù)編譯的原理與流程的文章就介紹到這了,更多相關(guān)JavaScript預(yù)編譯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序開發(fā)數(shù)據(jù)緩存基礎(chǔ)知識(shí)辨析及運(yùn)用實(shí)例詳解
這篇文章主要介紹了微信小程序開發(fā)數(shù)據(jù)緩存基礎(chǔ)知識(shí)辨析及運(yùn)用實(shí)例詳解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11Echarts圖表點(diǎn)擊x軸y軸切換圖表二級(jí)數(shù)據(jù)實(shí)例代碼
最近項(xiàng)目用到了Echarts圖進(jìn)行數(shù)據(jù)展示,所以下面這篇文章主要給大家介紹了關(guān)于Echarts圖表點(diǎn)擊x軸y軸切換圖表二級(jí)數(shù)據(jù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04echarts餅圖自定義設(shè)置顏色的3種實(shí)現(xiàn)方式
ECharts餅圖的顏色可以通過多種方式進(jìn)行設(shè)置,下面這篇文章主要給大家介紹了關(guān)于echarts餅圖自定義設(shè)置顏色的3種實(shí)現(xiàn)方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02Cropper.js入門之在HTML中實(shí)現(xiàn)交互式圖像裁剪
這篇文章主要為大家介紹了Cropper.js入門之在HTML中實(shí)現(xiàn)交互式圖像裁剪示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05