JS預編譯

skinner 發布于2019-08-19 17:14 / 1690人閱讀

摘要：執行結果執行了函數同名函數后者會覆蓋前者函數執行了函數函數執行了函數執行結果執行了聲明式函數在預編譯期聲明函數及被處理了，所以即使調用函數放在聲明函數前也能執行。

if ("a" in window) {
    var a = 1;
}
alert(a);

先來看這個題會alert出什么呢？答案很顯然會是：1

不過這道題目放在以前考我的話，那我一定會答錯，后來查找了一番資料，了解到兩個新名詞：預編譯和變量提升，為了以后不會忘記，還是留個筆記吧。

首先來了解一下什么是預編譯：對var關鍵字（值先設為undefined，執行時才給實際值）和函數定義式進行提前聲明，再接著順序執行代碼，函數定義式在預編譯時期就被解析，執行時期仍然用這個值，而無論是聲明的變量還是聲明式函數，在執行的時候，可以覆蓋預編譯時期的值。

下面我們來解釋一下上面的題目為什么是1呢，首先上面的代碼等價于下面的代碼：

var a;
if("a" in window){
    a = 1;
}

因為js沒有塊級作用域，所以if里面的也是全局的，所以在預編譯過程中里面的變量a會被提出來并被賦值為undefined，然后在執行if語句時候此時a已經存在于window中了，只不過值暫時是undefined，于是就會去執行if里面的代碼，所以結果為1；

再來一題：

var a = 1;
function a(x){}
alert(a);

等價于：
var a;
a = function(x){}
a = 1;
alert(a);

預編譯階段尋找代碼中的var(實際將var a=1拆分為var a;a=1兩部分，第一部分置頂，第二部分掛在語法樹上)以及function兩個關鍵字并置頂，在此將a以及a()分別置頂，之后在執行階段再對a從語法樹進行賦值，最后a為1。

理解了上面的代碼，下面再看一個類似的題目：

function a(x) {
    return x ;
}
var a;
alert(a);

等價于：
var a;
function a(x){
    return x;
}
alert(a);

這個題目跟上一個有點類似，但是卻又不同，原因就是在這里a并沒有被賦值，而只是聲明一個變量；在預編譯階段會將這種形式提前置頂，然后將function也置頂，但是function在a之后，于是預編譯后二者順序完全倒過來了，所以最后執行結果是function a(x){return x;}。

如果顯式的給a賦值一個a=undefined;那么結果就是undefined。因為此時牽扯到賦值了賦值的話就在執行階段去執行。

     Fn();  //執行結果："執行了函數2",同名函數后者會覆蓋前者
     function Fn(){ //函數1
        alert("執行了函數1");
     }
 
     function Fn(){  //函數2
        alert("執行了函數2");
     }

      Fn();  //執行結果："執行了聲明式函數",在預編譯期聲明函數及被處理了，所以即使Fn()調用函數放在聲明函數前也能執行。
      function Fn(){ //聲明式函數
         alert("執行了聲明式函數");
      }
 
      var Fn = function(){  //賦值式函數
         alert("執行了賦值式函數");
      }

通過對比上面兩段代碼，我們不難發現，聲明式函數與賦值式函數的區別在于：在JS的預編譯期，聲明式函數將會先被提取出來，然后才按順序執行js代碼，所以才有這樣的結果。

GPU云服務器云服務器預編譯階段模板預編譯 webrtc預編譯預編譯頭文件

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

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

JavaScript-預編譯

摘要：預編譯發生在函數執行前也就是說函數執行時，預編譯已經結束。五總結理解預編譯需要明白變量函數聲明和變量賦值。預編譯階段，只進行變量函數聲明，不會進行變量的初始化即變量賦值，所有變量的值都是變量賦值是在解釋執行階段才進行的。一、JS的概念 JavaScript ( JS ) 是一種具有函數優先的輕量級解釋型或即時編譯型的編程語言。二、JS語言特點 2.1 單線程（1）JavaScri...

Aldous 2019-08-22 17:01 評論0 收藏0
vue-cli配置預編譯

摘要：轉載文章公司的平臺功能越堆越多，打包也越來越費勁，一次十幾分鐘，運維很不爽，搗鼓了一下預編譯，試了一下大概縮短了七八分鐘，目前感覺還行，現在把它記下來，給需要的童鞋當做參考，也給自己記錄一下。 (轉載文章)公司的平臺功能越堆越多，打包也越來越費勁，一次十幾分鐘，運維很不爽，so搗鼓了一下預編譯，試了一下大概縮短了七八分鐘，目前感覺還行，現在把它記下來，給需要的童鞋當做參考，也給自己記錄...

KnewOne 2019-08-22 18:13 評論0 收藏0
5分鐘讀懂JavaScript預編譯流程

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

Baoyuan 2019-08-23 14:56 評論0 收藏0
javascript引擎執行的過程的理解--語法分析和預編譯階段

摘要：所以覺得把這個執行的詳細過程整理一下，幫助更好的理解。類似的語法報錯的如下圖所示三預編譯階段代碼塊通過語法分析階段之后，語法都正確的下回進入預編譯階段。另開出新文章詳細分析，主要介紹執行階段中的同步任務執行和異步任務執行機制事件循環。一、概述 js是一種非常靈活的語言，理解js引擎的執行過程對于我們學習js是非常有必要的?？戳撕芏噙@方便文章，大多數是講的是事件循環（event loo...

molyzzx 2019-08-23 14:35 評論0 收藏0
js預編譯過程

摘要：所以變量聲明提升和函數聲明提升會出現一個先后順序預編譯過程結束。先科普： 1.javaScript是解釋型語言,就是編譯一行，執行一行.....2.javaScript沒有塊級及作用域......3.javaScript具有變量和函數聲明提升功能.....4.AO對象和GO對象....5.預編譯就是解決代碼執行順序問題,與java語言類似(jvm).... 例如： (function...

FWHeart 2019-08-22 16:39 評論0 收藏0