JS學習筆記之JS預解析

JS預解析學習筆記

最近在學習JavaScript的預解析內容將筆記分享給大家

---

前言

JavaScript代碼是由瀏覽器中的JavaScript解析器來執行的。JavaScript解析器在運行JavaScript代碼的時候分爲兩步：預解析和代碼執行。

(1).預解析:JS引擎會把JS裏面所有的 var關鍵字 還有function函數提升到當前作用域的最前面
(2).代碼執行:按照代碼書寫順序從上往下執行

---

一、預解析？

預解析分爲 變量預解析(變量提升) 和 函數預解析(函數提升)

(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的時候會顯示未定義。

---

總結

以上就是今天要跟大家分享的JS預解析的內容寫得不好還請多多包涵。