JavaScript之變量提高

場景

開始讀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的變量提高方面的知識就只有這麼多，若是有幸這篇文章被你看到了，相信你看完之後也會對這個知識點有個大概的瞭解了。若是以爲有什麼地方說得不對的，歡迎指正。