变量作用域 （变量提升、window 、let）

1.变量作用域

在 JavaScript 中，用 var 申明的变量是有作用域的。

如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量：

function foo() {
    var x = 1;
    x = x + 1;
}

x = x + 2; // ReferenceError! 无法在函数体外引用变量x

如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响：

function foo() {
    var x = 1;
    alert(x);
}

function bar() {
    var x = 'A';
    alert(x);
}

foo()  // 1
bar()  // 'A'

JavaScript 的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行：

function foo() {
    var x = 1;
    function bar() {
        var y = x + 1; // bar可以访问foo的变量x!
        console.log(y);
    }
    // var z = y + 1; // ReferenceError! foo不可以访问bar的变量y!
    // console.log(z);
    bar();
}

foo()
2

如果内部函数和外部函数的变量名重名会怎样？

function foo() {
    var x = 1;
    function bar() {
        var x = 'A';
        console.log('x in bar() = ' + x); // 'A'
    }
    console.log('x in foo() = ' + x); // 1
    bar();
}

foo()
x in foo() = 1
x in bar() = A

JavaScript 函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量。

---

2.变量提升

JavaScript 的函数定义有个特点，它会先扫描整个函数体的语句，把所有申明的变量“提升”到函数顶部：

function foo() {
    var x = 'Hello, ' + y;
    alert(x);
    var y = 'Bob';
}

foo();  // Hello, undefined

虽然是 strict 模式，但语句 var x = 'Hello, ' + y; 并不报错，原因是变量 y 在稍后申明了。但是 alert 显示 Hello, undefined，说明变量 y 的值为 undefined 。这正是因为 JavaScript 引擎自动提升了变量 y 的声明，但不会提升变量 y 的赋值。

对于上述 foo() 函数，JavaScript 引擎看到的代码相当于：

function foo() {
    var y; // 提升变量y的申明
    var x = 'Hello, ' + y;
    alert(x);
    y = 'Bob';
}

由于 JavaScript 的这一怪异的“特性”，我们在函数内部定义变量时，请严格遵守 “在函数内部首先申明所有变量” 这一规则。最常见的做法是用一个 var 申明函数内部用到的所有变量：

function foo() {
    var
        x = 1, // x初始化为1
        y = x + 1, // y初始化为2
        z, i; // z和i为undefined
    // 其他语句:
    for (i=0; i<100; i++) {
        ...
    }
}

---

3.全局作用域

不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript 默认有一个全局对象 window，全局作用域的变量实际上被绑定到 window 的一个属性：

var course = 'Learn JavaScript';
alert(course); // 'Learn JavaScript'
alert(window.course); // 'Learn JavaScript'

因此，直接访问全局变量 course 和访问 window.course 是完全一样的。

你可能猜到了，由于函数定义有两种方式，以变量方式 var foo = function () {}定义的函数实际上也是一个全局变量，因此，顶层函数的定义也被视为一个全局变量，并绑定到window对象：

function foo() {
    alert('foo');
}

foo(); // 直接调用foo()
window.foo(); // 通过window.foo()调用

其实我们每次直接调用的 alert() 函数其实也是 window 的一个变量：

// 把 alert 保存到另一个变量:
var old_alert = window.alert;

// 给 alert 赋一个新的空白函数:
window.alert = function () {}

// 现在 alert 函数无法正常使用了
alert('无法用alert()显示了!');

// 恢复alert:
window.alert = old_alert;
alert('又可以用alert()了!');

JavaScript 实际上只有一个全局作用域。任何变量（函数也视为变量），如果没有在当前函数作用域中找到，就会继续往上查找，最后如果在全局作用域中也没有找到，则报 ReferenceError 错误。

---

4.名字空间

全局变量会绑定到 window 上，不同的 JavaScript 文件如果使用了相同的全局变量，或者定义了相同名字的顶层函数，都会造成命名冲突，并且很难被发现。

减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中。例如：

// 唯一的全局变量MYAPP:
var MYAPP = {};

// 其他变量:
MYAPP.name = 'myapp';
MYAPP.version = 1.0;

// 其他函数:
MYAPP.foo = function () {
    return 'foo';
};

把自己的代码全部放入唯一的名字空间 MYAPP 中，会大大减少全局变量冲突的可能。

许多著名的 JavaScript 库都是这么干的：jQuery，YUI，underscore等等。

---

5.局部作用域 （let）

由于 JavaScript 的变量作用域实际上是函数内部，我们在 for 循环等语句块中是无法定义具有局部作用域的变量的：

function foo() {
    for (var i=0; i<10; i++) {
        //
    }
    alert(i); // 仍然可以引用变量i
}

为了解决块级作用域，ES6 引入了新的关键字 let，用 let 替代 var 可以申明一个块级作用域的变量：

function foo() {
    for (let i=0; i<10; i++) {
        //
    }
    alert(i); // 不能引用变量i
}