技術標籤：JS學習筆記javascript

JS預解析學習筆記

文章目錄

• • JS預解析學習筆記
• 前言
• 一、預解析？
• 二、案例:
• • 案例1
  • 案例2
• 總結

前言

一、預解析？

二、案例:

案例1

（1）初始程式碼如下：

var num = 10;
        fun1();

        function fun1() {
            console.log(num);
            var num = 20;
        }

（2）執行時的程式碼：

// 變數函式都提升
        var num;

        function fun1() {
            var
 
 num;
            // 就近原則上面只有num,依次羅列所以這是undefined
            console.log(num);
            num = 20;
        }
        num = 10;
        fun();

（3）執行結果如下：


（4）分析：
   我們知道JavaScript解析器在執行JavaScript程式碼的時候，JS引擎會把JS裡面所有的 var關鍵字 還有function函式提升到當前作用域的最前面這裡又有var關鍵字又有function函式所以首先將變數提升到前面(注意提升是不賦值的)，然後再將函式提升到前面(注意提升是不呼叫的)，函式裡面也有var關鍵字所以需要提升到前面，再照著原來的程式碼順序num = 10，fun()這樣寫下來就是上面執行時的程式碼。

案例2

（1）初始程式碼如下：

getnum();
console.log(y);
        console.log(z);
        console.log(x);

        function getnum() {
            var x = y = z = 6;
            console.log(x);
            console.log(y);
            console.log(z);
        }

（2）相當於以下程式碼：

//函式提升
function getnum() {
            // var x = y = z = 6;
            // 這裡的變數宣告相當於var x = 6; y=6; z=6; y和z是全域性變數所以變數提升是將x提升就好
            //變數提升
            var x = 6;
            x = y = z = 6;
            console.log(x);
            console.log(y);
            console.log(z);
        }
        getnum();
        // 如果將控制檯x寫在第一行,就只會顯示3行6然後1行報錯影響下面y和z的繼續輸出，由於x是函式裡的區域性變數就會報錯顯示未定義(x is not defined)
        // 寫在最後一行前面的y和z就可以輸出不會被影響
        console.log(y);
        console.log(z);
        console.log(x);

（3）執行結果如下：

（4）分析：
   JS執行程式碼的時候首先在整個程式碼的主體部分找var關鍵字發現沒有，然後發現有getnum()函式於是將其提升到前面，其他的程式碼按照順序來依次執行，而getnum()函式裡面也有一個var關鍵字區域性變數的提升就是x變數，y和z是全域性變數沒關鍵字定義不會提升上去，然而由於x是區域性變數也就使得接下來在函式外部控制檯輸出x的時候會顯示未定義。

總結