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我是认真的,就这样,啾咪~~

你可能感兴趣的:(JavaScript的变量提升和函数作用域)