JavaScript之變量提升

young.li 發布于2019-08-26 11:59 / 2287人閱讀

摘要：原文是這樣說的不像那樣會發生變量提升現象。這就導致了所有變量聲明的語句都會被提升到代碼的最前面。這就是變量提升。注意提出的新指令和是不會發生變量提升現象的，所以在使用語法時，一定要先聲明再調用。

場景

開始讀es6的時候，一開始介紹的是let和const指令，文章中就提到一個概念 => 變量提升。原文是這樣說的：let不像var那樣會發生“變量提升”現象。對我這個菜鳥來說，what？什么是變量提升。經過一番度娘以后，有了個大概的概念和自己的理解。

理解

比較官方一點的解釋這樣的：JavaScript在工作時會先獲取所有變量，然后再一行一行地執行代碼。這就導致了所有變量聲明的語句都會被提升到代碼的最前面。這就是變量提升。

栗子

    var a = 5;
    function fn(){
        a = 3;
        console.log(a)
        var a;
    }
    fn()

很簡單的一段代碼，最終輸出的是3。函數內的a覆蓋了外面的變量a，var a;并沒有刷新a的值，因為真正在運行時的順序應該是這樣的

    var a = 5;
    function fn(){
        var a;
        a = 3;
        console.log(a)
    }
    fn()

我們可以看到，寫在下面的聲明a的語句被提前到了函數的最上面，所以最后輸出的是函數內部的變量a而不是外面的a = 5

    var a = 5;
    function fn(){
        console.log(a)
        var a = 3;;
    }
    fn()

在這里又會發生什么呢？我們看一下運行結果：

可能有人會說為什么打印的不是5呢？這就是變量提升的神奇之處，使用var聲明的變量在運行時該聲明語句會被放在當前當前作用域的最上面。這里又涉及到一個作用域的概念，暫時可以簡單理解為一對大括號就是一個作用域。
所以上面的代碼在運行時的順序應該是這樣的：

    var a = 5;
    function fn(){
        var a;
        console.log(a)
        a = 3;;
    }
    fn()

變量提升只是把聲明語句提升上去，而賦值語句是不會被提升的。明顯可以看到在函數內部還是新創建了一個變量a，但是在打印前都沒有給a賦值，所以最后打印出來的值是‘undefined’

函數

除了變量提升意外，函數也是存在這樣的現象，我們來看一段代碼

    // 代碼一
    fn()
    function fn(){
        console.log(0)
    }
    
    //代碼二
    fn()
    var fn = function() {
        console.log(0)
    }

直接看結果：

代碼一運行正常，代碼二就報錯了。因為代碼二的實際運行順序其實這樣的

    var fn;
    fn();
    fn = function() {
        console.log(0)
    }

很顯然，執行fn();之前fn只是一個變量，以函數的方式調用變量肯定是錯誤的用法。

注意：es6提出的新指令let和const是不會發生變量提升現象的，所以在使用es6語法時，一定要先聲明再調用。

到此，本人知道的有關JavaScript的變量提升方面的知識就只有這么多，如果有幸這篇文章被你看到了，相信你看完以后也會對這個知識點有個大概的了解了。如果覺得有什么地方說得不對的，歡迎指正。

GPU云服務器云服務器 js變量聲明提升 javascript提升 javascript變量 javascript定義變量

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

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

進擊JavaScript之（一）變量聲明提升

摘要：如下代碼輸出的結果是代碼執行分為兩個大步預解析的過程代碼的執行過程預解析與變量聲明提升程序在執行過程中，會先將代碼讀取到內存中檢查，會將所有的聲明在此進行標記，所謂的標記就是讓解析器知道有這個名字，后面在使用名字的時候不會出現未定義的錯誤。 showImg(https://segmentfault.com/img/remote/1460000012922850); 如下代碼輸出的結果是...

LeexMuller 2019-08-20 10:13 評論0 收藏0
【前端工程師手冊】JavaScript之作用域

摘要：函數作用域和塊作用域前面講了是詞法作用域，那么什么時候會創建作用域呢主要是基于函數級別的作用域，也就是每一個函數都會創建一個作用域。函數會被當作函數表達式而不是一個標準的函數聲明來處理。什么是作用域來一段《你不知道的JavaScript-上卷》中的原話：幾乎所有編程語言最基本的功能之一，就是能夠儲存變量當中的值，并且能在之后對這個值進行訪問或修改，這些變量住在哪里?換句話說，它...

Paul_King 2019-08-22 17:06 評論0 收藏0
【譯】理解JavaScript：作用域

摘要：作用域是代碼的不同部分在運行期間的可見性。大多數開發者想當然地理解作用域，但毫無疑問，有它自己的說明。變量可能是全局作用域的，或者是方法作用域的。總而言之，不要重復聲明變量，使用良好命名，盡力避免在聲明前調用和執行任何東西。原文鏈接：https://hackernoon.com/unders... 什么是作用域？就像JavaScript中的其他東西一樣，作用域并無特別之處。盡管大多...

betacat 2019-08-22 17:13 評論0 收藏0
JavaScript之作用域和閉包

摘要：依然持有對該作用域的引用，而這個引用就叫作閉包。循環和閉包正常情況下，我們對這段代碼行為的預期是分別輸出數字，每秒一次，每次一個。一、作用域作用域共有兩種主要的工作模型：第一種是最為普遍的，被大多數編程語言所采用的詞法作用域，另外一種叫作動態作用域； JavaScript所采用的作用域模式是詞法作用域。 1.詞法作用域詞法作用域意味著作用域是由書寫代碼時函數聲明的位置來決定...

animabear 2019-08-22 17:22 評論0 收藏0