通過示例演示理解javascript預(yù)解析

更新時間：2022年03月14日 15:36:45 作者：館主阿牛

這篇文章主要為大家介紹了通過示例演示理解javascript預(yù)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪

提出問題

先看下面的兩個最基本問題，結(jié)果你想到了嗎？

坑一

<script>
    // 坑一
    console.log(num);
    var num = 10;
</script>

在這里插入圖片描述

結(jié)果為什么會是undefined呢？先保留這個疑問，后面解答，嘿嘿嘿~~~

坑二

下面這種函數(shù)定義方式，函數(shù)的調(diào)用在函數(shù)前后都可以

// 下面這種函數(shù)定義方式，函數(shù)的調(diào)用在函數(shù)前后都可以
        fn();
        function fn(){
            console.log(15);
        }
        //fn();

在這里插入圖片描述

那么我們再看看javascript中的另一種函數(shù)定義（函數(shù)表達式）是否和上面的一樣呢？

// 下面這種函數(shù)定義方式，函數(shù)的調(diào)用只能在函數(shù)后面
        fun();
        var fun = function(){
            console.log(15);
        }
        // fun();

在這里插入圖片描述

這種函數(shù)定義，函數(shù)的調(diào)用放在函數(shù)前面為什么又會報錯了呢，帶著疑問我們看下面的解答。

問題解答

要了解上面兩個坑的原因，我們就要知道javascript中的預(yù)解析。

1．我們 js 引擎運行 js 分為兩步：預(yù)解析和代碼執(zhí)行。

(1)．預(yù)解析：js 引擎會把 js 里面所有的 var 還有 function 提升到當(dāng)前作用域的最前面
(2)．代碼執(zhí)行：按照代碼書寫的順序從上往下執(zhí)行。

2．預(yù)解析分為變量預(yù)解析（變量提升）和函數(shù)預(yù)解析（函數(shù)提升）。

(1)．變量提升就是把所有的變量聲明提升到當(dāng)前的作用域最前面，不提升賦值操作。
(2)．函數(shù)提升就是把所有的函數(shù)聲明提升到當(dāng)前作用于的最前面。

看了上述，是不是對于上面的疑惑解決了，還是懵懵懂懂嗎？下面我來復(fù)現(xiàn)一下你就明白了。

// // 坑一
        // console.log(num);
        // var num = 10;
        // 相當(dāng)于執(zhí)行了以下代碼
        var num; // 所有的 var 提升到當(dāng)前作用域的最前面,不提升賦值操作。
        console.log(num); //num此時未賦值，所以是undefined。
        num = 10;

// // 坑二
// 下面這種函數(shù)定義方式，函數(shù)的調(diào)用在函數(shù)前后都可以
        // fn();
        // function fn(){
        //     console.log(15);
        // }
        // 相當(dāng)于執(zhí)行下面代碼
        // 函數(shù)提升到當(dāng)前作用域的最前面
        function fn(){
            console.log(15);
        }
        fun();
// 下面這種函數(shù)定義方式，函數(shù)的調(diào)用只能在函數(shù)后面
        // fun();
        // var fun = function(){
        //     console.log(15);
        // }
        // 相當(dāng)于執(zhí)行了以下代碼
        var fun;   // 所有的 var 提升到當(dāng)前作用域的最前面,不提升賦值操作。
        fun(); // 此時壓根沒有fun()這個函數(shù)，所以會報錯
        fun = function(){
            console.log(15);
        }

現(xiàn)在是不是很清楚了。

案例練習(xí)

案例一

結(jié)果是幾？

 // 案例一
        var num=10;
        fun();
        function fun(){
            console.log(num);
            var num = 20;
        }
        // 相當(dāng)于執(zhí)行了以下代碼
        // var num;

        // function fun(){
        //     var num;
        //     console.log(num); //根據(jù)作用域鏈的就近原則，此時num未賦值，所以是undefined
        //     num = 20;
        // }
        // num = 10;
        // fun(); // 調(diào)用函數(shù)

在這里插入圖片描述

案例二

結(jié)果是幾？

// 案例二
        var num = 10;
        function fn(){
            console.log(num);
            var num = 20;
            console.log(num);
        }
        fn();
        // 相當(dāng)于執(zhí)行了以下代碼
        // var num;
        // function fn(){
        //     var num;
        //     console.log(num);   //根據(jù)作用域鏈就近原則，此時num未賦值，所以是undefined
        //     num = 20;
        //     console.log(num);  // 根據(jù)作用域鏈就近原則,num是20
        // }
        // num = 10;
        // fn(); // 調(diào)用函數(shù)

在這里插入圖片描述

案例三

結(jié)果是幾？

// 案例三
        var a = 18;
        f1();
        function f1(){
            var b = 9;
            console.log(a);  
            console.log(b);
            var a = '123';
        }
        // // 相當(dāng)于執(zhí)行了以下代碼
        // var a;
        // function f1() {
        //     var b;
        //     var a;
        //     b = 9;
        //     console.log(a);  //根據(jù)作用域鏈就近原則，此時a未賦值，所以是undefined
        //     console.log(b);  // 9
        //     a = '123';
        // }
        // a = 18;
        // f1();

在這里插入圖片描述

案例四（經(jīng)典的面試題）

結(jié)果是幾？

 // 案例四
        f1();
        console.log(c);
        console.log(b);
        console.log(a);
        function f1(){
            var a = b = c = 9;
            // 相當(dāng)于var a = 9; b = 9 ; c = 9 ; 在javascript中不用var申明直接賦值的變量是全局變量，所以b,c是全局變量
            // 區(qū)別于集體聲明 var a = 9,b = 9,c = 9; 等價于var a = 9,var b = 9,var c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }
        // // 相當(dāng)于執(zhí)行了以下代碼
        // function f1(){
        //     var a;
        //     b = 9;
        //     c = 9;
        //     a = 9;
        //     console.log(a); // 9
        //     console.log(b); // 9
        //     console.log(c); // 9
        // }
        // f1();  // 函數(shù)調(diào)用
        // console.log(c);  // 9
        // console.log(b);  // 9
        // console.log(a);  // a是函數(shù)里的局部變量，所以函數(shù)外沒有申明的話會報錯

在這里插入圖片描述