Javascript Hoisting

1.引言

初学js不久，还是发现js和其他编程语言（java，C#…）有些不一样的，一些强类型语言中带过来的“固化”的思想在js中可能会让你莫名其妙，what？这特么也可以？下面介绍的就是其中之一，javascript hoisting 机制，也就是js提升机制咯。本篇不在传道受业，仅仅是方便个人复习翻阅，文中若有纰漏，请留言指出，不必留情。

2.Hoisting

先提一个问题：解释语言是不是一行一行的从上到下的执行，读一行，翻译一行？在回答这个问题之前，不妨来看看这个简单的示例（Demo1）：

        a="test a"
        var a;
        console.log(a);

会输入什么？显然Undefined，var a；在后面啊，默认值不是Undefined吗，但是结果却是：“test a”

那这样写行不行呢？（Demo2：结果显示却是你意料之中的“Undefined”）

    console.log(a);
    var a="test b";

实际上js代码在执行的整个过程中是有所谓的编译期，只不过这个编译期很短暂，但却不可忽略，编译期间js引擎做了很多事情：词法分析，作用域链的构建等，还有一个就是提升，声明的提升，包括变量的声明和函数的声明，提升到何处？提升到作用域的顶端，也就是说，Hoisting：在变量（或者函数）的作用域内，不管变量（或者函数）在何处声明，都会被提升到作用域的顶部，但是变量（或者函数）初始化的顺序不变。换句话说“var a=2”会被拆分成“var a；a=2”两个部分，前一个部分会hoisting到作用域的顶端，而后一部分放在原地不变（函数的声明后面会有介绍，稍安勿躁！），干说理论蛋疼，现在结合上面的Demo1和Demo2看看：

Demo1：由于变量a的声明会提升到作用于的顶端，初始化的位置没有变化，所以它等价于下面的代码，显而易见输出结果“test a”。

        var a;
        a="test a"
        console.log(a);

Demo2：等价于下面的代码，输出的是变量a的默认值Undefined。

        var a;
        console.log(a);
        a="test b";

值得注意的是上面说的是变量的Hoisting，函数的Hoisting大同小异，但是还是有一些注意的地方：

1. 函数声明提升，函数表达式不提升

        foo();
        var func=function foo(){
            console.log(a);
            var a="test c";
        }

等价代码：

       var func;
       foo();
       func=function foo(){
           var a;
           console.log(a);//Undefined
           a="test c";
       }

而不是等价于：

       function foo(){
           var a;
           console.log(a);
           a="test c";
       }
       var func;
       foo();
       func=foo;

2. 函数提升优先于变量提升

        var foo=3;
        foo();
        function foo(){
            console.log(1);
        }
        foo=function(){
            console.log(2);
        }

实际上上述代码等价于：

        function foo(){
            console.log(1);
        }
        var foo;
        foo=3;
        foo();//TypeError：此时foo被覆盖，已变成一个变量了
        foo=function(){
            console.log(2);
        }

3.注意

• 尽量避免函数名与变量名重复，当然一般做项目过程中也不会重复的，只是在一些面试题里面出现，用来考察你对Hoisting的理解深入程度。
• Hoisting提升到作用域的顶端，所以应该避免在块中声明变量或者函数，因为块容易被看成一块作用域（ES6中的块级作用域除外）。
• 声明本身会被提升，而包括函数表达式的赋值在内的赋值操作并不会提升。