JS中的變量提升和函數提升

zhunjiee 發布于2019-08-23 12:00 / 1879人閱讀

摘要：什么是函數作用域下的變量提升和函數提升函數作用域中也存在變量提升和函數提升，這個和全局作用域下的情況是一模一樣的，就是把作用域想成是全局的就可以了。

在js中有一部分比較難以理解，卻也是在筆試過程中很容易考的，那就是變量提升和函數提升的問題，這篇文章我會就變量提升和函數提升的問題拓展一下有關js函數的知識點，包括作用域的問題，后面還會有一些小練習來判斷自己是否真的搞懂了。

作用域

在js中作用域分為全局作用域和函數作用域，這里是針對用var聲明的變量是全局的，還是只是在函數中可以使用，在es6中新增了兩個聲明變量的方法，let和var一樣，都是聲明變量的，不過let是在塊級作用域下起作用，const是用來聲明常量的，不能進行二次賦值。這里重點是變量提升，就先用var來講解。

全局作用域 什么是全局作用域？

全局作用域是指在當前的script標簽內定義的變量，所有的函數都可以使用，它在打開時創建，關閉時銷毀。在全局作用域中有一個全局對象window，window是由瀏覽器創建的，它里面的方法所有對象都可以使用。

在全局作用域下創建的變量會作為window進行保存，創建的函數會作為window的方法

什么是全局作用域下的變量提升？

終于說到變量提升了，那么什么是全局作用域下的變量提升呢？看一下下面的例子：

        console.log(a);//undefined
        var a = 10;
        console.log(a);//10

由于在js中代碼執行的順序是從上而下，所以在第一次打印的時候，要找變量a，如果沒有變量提升的話應該會會報錯說a沒有定義，而這里輸出的是undefined，說明a已經定義了，但是沒有賦值。那么這就是變量提升起了作用了。需要注意的是

變量提升只會提升聲明，而不會提升賦值，也就是說在執行第一個打印操作時，只是存在變量a，a卻沒有值；

打印結果是undefined說明變量存在，只是沒有值，而如果是報錯說a is not defined的話，就是沒有變量a。

什么是全局作用域下的函數提升？

函數提升和變量提升是一樣的道理，都是將本來應該在后面執行的代碼全部放在前面，只是變量提升是提升聲明；而函數提升是提升整個函數，也就是在代碼還沒開始執行的時候函數就會被創建。

調用在定義函數之后

        console.log(a);//undegfined
        var a = 10;
        function fun(){
            console.log(a);
        }
        fun();//10

這里函數調用是在定義函數之后，看不出來函數是否存在提升的情況，但這里值得一提的是，如果函數沒有需要訪問的變量的時候，就會去上一層找，就是這個全局的a，值是10，所以會打印10.

調用在定義函數之前

        console.log(a);//undefined
        fun();//undefined
        var a = 10;
        function fun(){
            console.log(a);
        }

這里函數調用是在定義函數之前，并且是在a賦值之前。首先我們來判斷一下，如果沒有函數提升的話會怎樣，執行到fun這一行，就會發現fun沒有定義，然后會報錯fun is not a function；現在有了函數提升過后，執行到fun后，會去找a，而a只是定義了沒有賦值，就會打印一個undefined，和第一個打印一樣的結果。

函數作用域 什么是函數作用域？

函數作用域，顧名思義，就是只在函數中能夠使用的變量，函數作用域和全局作用域之間的關系是函數作用域中的方法可以使用全局的變量，而全局方法不能使用函數中的便來變量，每個函數之間也是不能取到各自函數內部的值的。下面的圖幫助理解一下：

每個函數作用域是相互獨立的，在函數內部定義的變量是不能進行相互調用的。

什么是函數作用域下的變量提升和函數提升？

函數作用域中也存在變量提升和函數提升，這個和全局作用域下的情況是一模一樣的，就是把作用域想成是全局的就可以了。

練習

        var a = 123;
        function fun(){
            alert(a);//123
        }
        fun();

        var a = 123;
        function fun(){
            alert(a);//456
            var a = 456;
        }
        fun();
        alert(a);//123

        var a = 123;
        function fun(){
            alert(a);//123
            a = 456;
        }
        fun();
        alert(a);//456（456是因為函數內部將全局的變量a的值改變了）

        var a = 123;
        function fun(a){
            alert(a);//123
            a = 456;
        }
        fun(123);
        alert(a);//456

 var a = 123;
        function fun(a){
            alert(a);//undefined（undefined是因為fun在被調用的時候沒有傳遞實參）
            a = 456;
        }
        fun();
        alert(a);//456

總結

在面試的筆試題中很容易碰到這樣的題，有的可能還不只是考這個知識點，可能還會涉及到閉包之類的，或者更難以理解一點兒的this指向問題，但是不管怎樣，只要知道原理，怎么考都沒關系，愿大家在前端這段路上堅持走下去，加油！

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

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

js 變量提升和閉包理解

摘要：變量的作用域無非就是兩種全局變量和局部變量。其中內部函數中可以訪問外部函數的變量，是因為內部函數的作用域鏈中包含了外部函數的作用域也可以理解為內部函數的作用范圍輻射到了外部函數的作用范圍另一方面，在函數外部自然無法讀取函數內的局部變量。以前學習的時候，了解過變量提升和閉包，但是沒有深入了解，網上查了資料，這里記錄下，只供參考。部分內容引用： https://www.cnblogs.c...

luoyibu 2019-08-22 15:16 評論0 收藏0
原型模式故事鏈(4)--JS執行上下文、變量提升、函數聲明

摘要：代碼在執行之前會先全局中變量提升函數聲明。函數的執行上下文，也就是在這個函數范圍內找到函數執行上下文中函數范圍內，所有用聲明的變量。函數執行時，按照執行位置查找變量作用域只會向上查找。下一回變量作用域與閉包上一章：JS的數據類型傳送門：https://segmentfault.com/a/11... 好！話不多少，我們就開始吧。對變量提升和函數聲明的理解，能讓你更清楚容易的理解，...

melody_lql 2019-08-29 17:05 評論0 收藏0
原型模式故事鏈(4)--JS執行上下文、變量提升、函數聲明

摘要：代碼在執行之前會先全局中變量提升函數聲明。函數的執行上下文，也就是在這個函數范圍內找到函數執行上下文中函數范圍內，所有用聲明的變量。函數執行時，按照執行位置查找變量作用域只會向上查找。下一回變量作用域與閉包上一章：JS的數據類型傳送門：https://segmentfault.com/a/11... 好！話不多少，我們就開始吧。對變量提升和函數聲明的理解，能讓你更清楚容易的理解，...

zhigoo 2019-08-02 11:48 評論0 收藏0
原型模式故事鏈(4)--JS執行上下文、變量提升、函數聲明

摘要：代碼在執行之前會先全局中變量提升函數聲明。函數的執行上下文，也就是在這個函數范圍內找到函數執行上下文中函數范圍內，所有用聲明的變量。函數執行時，按照執行位置查找變量作用域只會向上查找。下一回變量作用域與閉包上一章：JS的數據類型傳送門：https://segmentfault.com/a/11... 好！話不多少，我們就開始吧。對變量提升和函數聲明的理解，能讓你更清楚容易的理解，...

netScorpion 2019-08-23 12:33 評論0 收藏0