JavaScript與解析不同情況分析

harriszh 發布于2019-08-23 16:14 / 2095人閱讀

摘要：五階段運行結果運行結果原因在運行前，我就猜想彈出的這個應該是一個的可沒想到卻是，這使我百思不得其解。當我們程序真正運行時，我們把參數傳過去，在這里并不會把這個參數值賦值給這個形參。

要寫出嚴謹的代碼或者是優化性能就必須做到‘知己知彼’，為此把握事物規律方能有備無患，穩步前進，故對此有所探知。

一、階段

var a = 5;

function f(n){

　　alert(a);

}

f();

上面代碼的全局處理過程：

1、預處理階段

a、讀取分析整個源代碼

b、先掃描函數聲明，之后掃描變量(var聲明)

    b_a、處理**函數聲明**時有沖突，會覆蓋

    b_b、處理變量聲明時有沖突，會忽略（相對函數聲明）

c、將掃描到的函數和變量保存到一個對象中（全局的保存到window對象中）

d、變量的值是undefined，函數的值則指向該函數（是一個函數字符串）

   形式如下：{a : undefined, f : "function(){alert(a);}"}

2、運行階段

在我們剛剛的案例中

a、將變量a的值從undefined改為5

b、調用f()，一遍函數得到執行

上面函數代碼的處理過程：

**1、預處理階段**

    a、將函數的參數添加到一個對象（**詞法對象**）

    b、掃描**函數聲明**，之后掃描變量(var聲明)

    d、將掃描到的函數和方法添加到詞法對象里面

    c、變量的值是undefined，函數的值則指向該函數（與全局的一樣）

2、運行階段

    與全局的的運行原理一樣

二、階段

    var b = 1;
    
    function ff(){
    
    　　alert(b);
    
    　　var b = 5;
    
    　　alert(b);
    
    }
    
    ff();

//結果彈出為：undefined

原因：

js在預處理階段時，將函數ff()和變量b保存到window對象中，

此時b = undefined，到了運行階段，b = 1，這時調用函數ff()，

js會先把函數內的變量添加到詞法對象中，此時b = undefined，

再之后alert(b)，因為是在方法內部，所以alert(b)會調用詞法

對象中的b。然而這時詞法對象中的b = undefined，所以執行結

果彈出的是undefined,當alert執行完之后b = 5;

三、階段

alert(a);

function a() {

　　console.log("xx");

}

var a = 5;

function a() {

　　console.log("yy");

}

//運行結果："function a() { console.log("yy"); }"

原因：

我們發現變量a和兩個方法a()同名了，這時，js在預處理的時候

會優先將函數保存到window對象中，然后如果發現同名的是

變量，這時它會忽略這個變量；如果發現同名的是函數，那

么后面的會將前面的覆蓋。所以執行alert彈出的會是函數

四、階段

alert(b);

var b = 5;

var b = function () {

　　console.log("xx");

}

//運行結果：undefined

原因：

我們知道，定義一個方法有多種形式。像上面這個案例中，

我們的函數是匿名的，然后賦值給了一個變量。但變量終究

是變量，js不會因為它的值比較特別就特殊對待，所以，在

js在預處理的時候，先將第一個變量b保存到window中，此時

變量b=undefined,然后第二個變量b覆蓋了第一個變量，此時

的變量b依然還是等于undefined，所以在程序運行的時候彈出

值會等于undefined。

五、階段

function c(num1){

　　alert(num1);

}

c(2);

//運行結果：2

function d(num2){

　　alert(num2);

　　var num2 = 5;

}

d(2);

//運行結果：2

原因：

在運行前，我就猜想彈出的這個應該是一個undefined的

可沒想到卻是2，這使我百思不得其解。

在js預處理的時候讀取到了這個函數有一個參數，于是就

直接將這個參數放到了詞法對象中，這時個參數的值是

undefined，之后它繼續向下掃描，發現有一個變量定義，

但我們卻發現這變量與參數同名，這個時候js會怎么做？

這時按照之前所學的，這個變量會被加到詞法對象中，而

事實上也的確是加了，不過卻給它打上了一個標簽，用來

標識這個變量是一個參數，這時這個變量的值也是undefined。

當程序真正運行的時候，我們把參數傳過去，這個參數就會賦值的到這個參數中，

然后彈出結果，然后再賦值為5。

六、階段

接下來還有幾個問題

1.看下面代碼

funciton f(num){

　　alert(num);

　　funciton num(){
　　　　
　　}

}

f(6);

返回結果為："funciton num(){}"

像出現上面這個情況的時候，js也還是一樣在預處理的時

候，將參數放到詞法對象中，然后發現里面有一個同名的

函數，這時js就會把這個函數放到詞法對象中，并覆蓋之

前的參數，而它的值指向的就是這個函數。當我們程序真

正運行時，我們把參數傳過去，js在這里并不會把6這個參

數值賦值給這個形參。

GPU云服務器云服務器查看域名解析情況情況一則及分析服務器運行情況分析二級域名解析不同ip 備案

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

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

JavaScript 是如何工作的：解析、抽象語法樹（AST）+ 提升編譯速度5個技巧

摘要：無論你使用的是解釋型語言還是編譯型語言，都有一個共同的部分將源代碼作為純文本解析為抽象語法樹的數據結構。和抽象語法樹相對的是具體語法樹，通常稱作分析樹。這是引入字節碼緩存的原因。這是專門探索 JavaScript 及其所構建的組件的系列文章的第 14 篇。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！如果你錯過了前面的章節，可以在這里找到它們： JavaS...

raoyi 2019-08-23 14:52 評論0 收藏0
JavaScript 啟動性能瓶頸分析與解決方案

摘要：啟動性能瓶頸分析與解決方案翻譯自的，從屬于筆者的前端入門與工程實踐。我們必須要清醒地認識到全面評測以挖掘出真正性能瓶頸的重要性。這可能是最佳的方式了，類似于這樣的模式鼓勵基于路由的分組，目前被與廣泛使用。 JavaScript 啟動性能瓶頸分析與解決方案翻譯自 Addy Osmani 的 JavaScript Start-up Performance，從屬于筆者的Web 前端入門與工...

SQC 2019-08-20 14:15 評論0 收藏0
《Webkit技術內幕》之頁面渲染過程

摘要：文章同步到技術內幕之頁面渲染過程最近拜讀了傳說中的技術內幕一書，有很大收獲，尤其是對頁面渲染有了較深的認識。解析語法分析，基于詞法解釋器生成的新標記，構建成抽象語法樹，解析器嘗試將其與某條語法規則進行匹配。文章同步到github《Webkit技術內幕》之頁面渲染過程最近拜讀了傳說中的《Webkit技術內幕》一書，有很大收獲，尤其是對頁面渲染有了較深的認識。由于功力有限，而且書中設...

vvpvvp 2019-08-29 16:17 評論0 收藏0
《Webkit技術內幕》之頁面渲染過程

摘要：文章同步到技術內幕之頁面渲染過程最近拜讀了傳說中的技術內幕一書，有很大收獲，尤其是對頁面渲染有了較深的認識。解析語法分析，基于詞法解釋器生成的新標記，構建成抽象語法樹，解析器嘗試將其與某條語法規則進行匹配。文章同步到github《Webkit技術內幕》之頁面渲染過程最近拜讀了傳說中的《Webkit技術內幕》一書，有很大收獲，尤其是對頁面渲染有了較深的認識。由于功力有限，而且書中設...

adam1q84 2019-08-23 10:43 評論0 收藏0
《Webkit技術內幕》之頁面渲染過程

摘要：文章同步到技術內幕之頁面渲染過程最近拜讀了傳說中的技術內幕一書，有很大收獲，尤其是對頁面渲染有了較深的認識。解析語法分析，基于詞法解釋器生成的新標記，構建成抽象語法樹，解析器嘗試將其與某條語法規則進行匹配。文章同步到github《Webkit技術內幕》之頁面渲染過程最近拜讀了傳說中的《Webkit技術內幕》一書，有很大收獲，尤其是對頁面渲染有了較深的認識。由于功力有限，而且書中設...

forsigner 2019-08-02 11:09 評論0 收藏0