查到一篇写的简单易懂，索性就直接用了，另做了部分补充

前言
因为我在写这文章的时候，百度里找资料，找到了园友的一篇文章，写的很好，可是我写了又不想放弃，所以就在里面拿了很多东西过来！~~

[翻译]JavaScript Scoping and Hoisting

希望得到大家谅解。

因为这个问题很是经典，而且容易出错，所以在介绍一次。哈哈。莫怪哦。

一。案发现场
我们先看一段很简单的代码：

var v='Hello World';
alert(v);

这个没有疑问吧，弹出“Hello World”。OK，我们继续。

我们在看一段Code：

var v='Hello World';
(function(){
    alert(v);
})()

经过运行之后，我们发现，还是和我们预期的一样，弹出了“Hello World”。

好了，有意思的来了。接着在看一段下面的代码：

var v='Hello World';
(function(){
    alert(v);
    var v='I love you';
})()

如果这个是一个面试题，面试官问你这个结果是多少？你怎么回答？

我们先看结果吧！

结果是 undefined？和你上面自己想的一样吗？

好吧，我就不故弄玄虚了。其实，这里面隐藏了一个陷阱—–JavaScript中的变量提升（Hoisting）；

二。深度剖析
现在我来解释下提升是什么意思？顾名思义，就是把下面的东西提到上面。在JS中，就是把定义在后面的东东（变量或函数）提升到前面中定义。

在解释提升之前，我们先来看一下js中的作用域（scoping）问题。

对于JavaScript新手来说scoping是最令人困惑的部分之一。事实上，不仅仅是新手，我遇到或很多有经验的JavaScript程序员也不能完全理解scoping。JavaScript的scoping如此复杂的原因是它看上去非常像C系语言的成员。请看下面的C程序：

复制代码

#include <stdio.h>
    int main() {
    int x = 1;
    printf("%d, ", x); // 1
    if (1) {
        int x = 2;
        printf("%d, ", x); // 2
     }
    printf("%d\n", x); // 1
}

复制代码
这段程序的输出是1,2,1。这是因为在C系语言有块级作用域(block-level scope),当进入到一个块时，就像if语句，在这个块级作用域中会声明新的变量，这些变量不会影响到外部作用域。但是JavaScript却不是这样。在Firebug中试试下面的代码：

复制代码

 var x = 1;
    console.log(x); // 1
 if (true) {
   var x = 2;
   console.log(x); //2
}
 console.log(x);// 2

复制代码
在这段代码中，Firebug显示1，2,2。这是因为JavaScript是函数级作用域(function-level scope)。这和C系语言是完全不同的。块，就像if语句，并不会创建一个新的作用域。只有函数才会创建新的作用域。

对于大部分熟悉C，C++，C#或是Java的程序员来说，这是意料之外并且不被待见的。幸运的是，因为JavaScript函数的灵活性，对于这个问题我们有一个解决方案。如果你必须在函数中创建一个临时的作用域，请像下面这样做：

复制代码

function foo() {
    var x = 1;
    if (x) {
        (function () {
            var x = 2;
            // some other code
        }());
    }
    // x is still 1.
}

复制代码
这种方面确实非常灵活，它使用在任何需要创建一个临时作用域的地方，不仅仅是某个块中。但是，我强烈建议你花点时间好好理解下JavaScript scoping。它实在是非常强力，而且它也是我最喜欢的语言特性之一。如果你很好的理解了scoping，理解hoisting将会更加容易。

2.1变量提升
变量提升，很简单，就是把变量提升提到函数的top的地方。我么需要说明的是，变量提升 只是提升变量的声明，并不会把赋值也提升上来。

比如：

我们定义三个变量：

(function(){
    var a='One';
    var b='Two';
    var c='Three';
})()

实际上它是这样子的：

复制代码

(function(){
    var a,b,c;
    a='One';
    b='Two';
    c='Three';

})()
复制代码
这个时候就把变量提升了呀。

好，我们现在回到第一段code里面。为什么会报错呢？其实，根据我么根据上面变量提升原件以及js的作用域（块级作用域）的分析，得知 上面代码真正变成如下：

复制代码

var v='Hello World';
(function(){
    var v;
    alert(v);
    v='I love you';
})()

复制代码
所以，才会提示说“undefined”。

从这里，我们也学习到，我们在写js code 的时候，我么需要把变量放在函数级作用域的顶端，比如我在上面所举的例子：var a,b,c;。以防止出现意外。

2.2 函数提升
函数提升是把整个函数都提到前面去。

在我们写js code 的时候，我们有2中写法，一种是函数表达式，另外一种是函数声明方式。我们需要重点注意的是，只有函数声明形式才能被提升。

函数声明方式提升【成功】

复制代码

function myTest(){
    foo();
    function foo(){
        alert("我来自 foo");
    }
}
myTest();

复制代码
函数表达式方式提升【失败】

复制代码

function myTest(){
    foo();
   var foo =function foo(){
        alert("我来自 foo");
    }
}
myTest();

复制代码
结果如下：

左边报错了。没骗你。

应该到这里基本都可以弄懂了。~

Declarations, Names, and Hoisting

在JavaScript中，一个作用域(scope)中的名称(name)有以下四种：

1. 语言自身定义(Language-defined): 所有的作用域默认都会包含this和arguments。

2. 函数形参(Formal parameters): 函数有名字的形参会进入到函数体的作用域中。

3. 函数声明(Function decalrations): 通过function foo() {}的形式。

4. 变量声明(Variable declarations): 通过var foo;的形式。

函数声明和变量声明总是被JavaScript解释器隐式地提升(hoist)到包含他们的作用域的最顶端。很明显的，语言自身定义和函数形参已经处于作用域顶端。这就像下面的代码：

1:  function foo() {
2:      bar();
3:      var x = 1;
4:  }

实际上被解释成像下面那样：

1:  function foo() {
2:      var x;
3:      bar();
4:      x = 1;
5:  }

结果是不管声明是否被执行都没有影响。下面的两段代码是等价的：

 1:  function foo() {
 2:      if (false) {
 3:          var x = 1;
 4:      }
 5:      return;
 6:      var y = 1;
 7:  }
 8:  function foo() {
 9:      var x, y;
10:      if (false) {
11:          x = 1;
12:      }
13:      return;
14:      y = 1;
15:  }

注意到声明的赋值部分并没有被提升(hoist)。只有声明的名称被提升了。这和函数声明不同，函数声明中，整个函数体也都会被提升。但是请记住，声明一个函数一般来说有两种方式。考虑下面的JavaScript代码：

 1:  function test() {
 2:      foo(); // TypeError "foo is not a function"
 3:      bar(); // "this will run!"
 4:      var foo = function () { // 函数表达式被赋值给变量'foo'
 5:          alert("this won't run!");
 6:      }
 7:      function bar() { // 名为'bar'的函数声明
 8:          alert("this will run!");
 9:      }
10:  }
11:  test();

在这里，只有函数声明的方式会连函数体一起提升，而函数表达式中只会提升名称，函数体只有在执行到赋值语句时才会被赋值。

以上就包括了所有关于提升(hoisting)的基础，看起来并没有那么复杂或是令人困惑对吧。但是，这是JavaScript，在某些特殊情况下，总会有那么一点复杂。

Name Resolution Order

需要记住的最最重要的特例就是名称解析顺序(name resolution order)。记住一个名称进入一个作用域一共有四种方式。我上面列出的顺序就是他们解析的顺序。总的来说，如果一个名称已经被定义了，他绝不会被另一个拥有不用属性的同名名称覆盖。这就意味着，函数声明比变量声明具有更高的优先级。但是这却不意味着对这个名称的赋值无效，仅仅是声明的部分会被忽略而已。但是有下面几个例外：

内置的名称arguments的行为有些怪异。他似乎是在形参之后，函数声明之前被声明。这就意味着名为arguments的形参会比内置的arguments具有更高的优先级，即使这个形参是undefined。这是一个不好的特性，不要使用arguments作为形参。
任何地方试图使用this作为一个标识都会引起语法错误，这是一个好的特性。
如果有多个同名形参，那位于列表最后的形参拥有最高的优先级，即使它是undefined。

Name Function Expressions

你可以在函数表达式中给函数定义名称，就像函数声明的语句一样。但这并不会使它成为一个函数声明，并且这个名称也不会被引入到作用域中，而且，函数体也不会被提升(hoist)。这里有一些代码可以说明我说的是什么意思：

 1:  foo(); // TypeError "foo is not a function"
 2:  bar(); // valid
 3:  baz(); // TypeError "baz is not a function"
 4:  spam(); // ReferenceError "spam is not defined"
 5:   
 6:  var foo = function () {}; // 匿名函数表达式('foo'被提升)
 7:  function bar() {}; // 函数声明('bar'和函数体被提升)
 8:  var baz = function spam() {}; // 命名函数表达式(只有'baz'被提升)
 9:   
10:  foo(); // valid
11:  bar(); // valid
12:  baz(); // valid
13:  spam(); // ReferenceError "spam is not defined"

How to Code With This Knowledge

现在你明白了作用域和提升，那么这对编写JavaScript代码意味着什么呢？最重要的一条是声明变量时总是使用var语句。我强烈的建议你在每个作用域中都只在最顶端使用一个var。如果你强制自己这么做，你永远也不会被提升相关的问题困扰。尽管这么做会使的跟踪当前作用域实际声明了哪些变量变得更加困难。我建议在JSLint使用onevar选项。如果你做了所有前面的建议，你的代码看起来会是下面这样：

1:  /*jslint onevar: true [...] */
2:  function foo(a, b, c) {
3:      var x = 1,
4:          bar,
5:          baz = "something";
6:  }

多使用let

第一次接触let关键字，有一个要非常非常要注意的概念就是”JavaScript 严格模式”，比如下述的代码运行就会报错：

let hello = 'hello world.';
console.log(hello);

错误信息如下：

let hello = 'hello world.';
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    ...

解决方法就是，在文件头添加”javascript 严格模式”声明：

'use strict';

let hello = 'hello world.';
console.log(hello);

4
更多更详细的关于”javascript 严格模式”说明，请参考阮一峰的博客
http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html

let和var关键字的异同

声明后未赋值，表现相同

'use strict';

(function() {
  var varTest;
  let letTest;
  console.log(varTest); //输出undefined
  console.log(letTest); //输出undefined
}());

使用未声明的变量，表现不同:

(function() {
  console.log(varTest); //输出undefined(注意要注释掉下面一行才能运行)
  console.log(letTest); //直接报错：ReferenceError: letTest is not defined

  var varTest = 'test var OK.';
  let letTest = 'test let OK.';
}());

重复声明同一个变量时，表现不同：

'use strict';

(function() {
  var varTest = 'test var OK.';
  let letTest = 'test let OK.';

  var varTest = 'varTest changed.';
  let letTest = 'letTest changed.'; //直接报错：SyntaxError: Identifier 'letTest' has already been declared

  console.log(varTest); //输出varTest changed.(注意要注释掉上面letTest变量的重复声明才能运行)
  console.log(letTest);
}());

变量作用范围，表现不同

'use strict';

(function() {
  var varTest = 'test var OK.';
  let letTest = 'test let OK.';

  {
    var varTest = 'varTest changed.';
    let letTest = 'letTest changed.';
  }

  console.log(varTest); //输出"varTest changed."，内部"{}"中声明的varTest变量覆盖外部的letTest声明
  console.log(letTest); //输出"test let OK."，内部"{}"中声明的letTest和外部的letTest不是同一个变量
}());

参考：
http://www.cnblogs.com/damonlan/archive/2012/07/01/2553425.html
http://www.cnblogs.com/betarabbit/archive/2012/01/28/2330446.html
http://blog.csdn.net/nfer_zhuang/article/details/48781671