JavaScript的变量提升和函数作用域

在 JavaScript 的世界，或者说编程的世界里，变量很重要，但是因为 JavaScript 的变量有些 幺蛾子般 的特性，所以总有各种奇怪的题目来考大家的应变能力。
我们先说说这幺蛾子般的特性是怎么来的，大家应该知道，JavaScript最早是花10天抄袭Java的语法而来，感觉很叼对不？然而，十天的后果是根本没有健壮性可言，俗称一堆bug......

变量声明

而这个变态的特性，在我看来就是最大的bug之一。所以，有时候看其他人乐此不比的推荐刷这种题目并且把它妖魔化的时候，我....难受。
幸好ES6出来新的变量定义let方式来修补这个bug，它的特性才是模仿正统编程里面变量的定义。而之前的幺蛾子特性，我们还是要说一下。

针对var变量，只要记住下面这句话，统统搞定

变量声明自动提前 + 变量是函数级作用域

    var b = 1
    function outer () {        var b = 2
        function inner (){
            b++            var b = 4
            console.log(b)   // 4
        }
        inner()
    }
    outer()

对于这段代码可以做如下分析：

• 变量声明提前
  在函数里面定义了变量，那么你就相当于在函数的 最最前面，加了一个变量声明一样，所以上面的代码可以变为

    var b  <=======
    b = 1
    function outer () {        var b   <=======
        b = 2
        function inner (){            var b  <=======
            b++
            b = 4
            console.log(b); // 4
        }
        inner()
    }
    outer()

• 函数级别作用域
  也就是说，变量只在自己的函数内有效，给大家画个图看一下
  如果你还不知道什么是作用域，在这里我用一句大家都能理解的英文概括Where to look things
  

  

  三个 b 分别的作用域

  
  如果你还是不理解，那我索性改一下变量名，让你看的更清晰

    var global_b

    global_b = 1
    function outer () {        var outer_b 

        outer_b = 2
        function inner (){            var inner_b

            inner_b++;
            inner_b = 3;            console.log(inner_b)
        }
        inner()
    }
    outer()

虽然我是史上最不正经的程序员，但对JavaScript我是认真的，就这样，啾咪~~

作者：小蝉_蝉
链接：https://www.jianshu.com/p/aea9af7125cb