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);//Undefineda="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中的块级作用域除外）。
声明本身会被提升，而包括函数表达式的赋值在内的赋值操作并不会提升。