前端JS基础第二篇：作用域与作用域链

当点击事件触发时，for循环已经执行结束了，由于i是var定义的，后面定义的i会覆盖前面的，所以最后i为5，当执行函数时，函数内没有i，根据作用域链向父级找，得到的是全局变量i = 5。聪明的小伙伴肯定可以举一反三，如果函数内不是点击事件是类似setTimeout这类的异步操作，最后的结果也是一个道理。

let实现原理

利用 JS 中基本类型（Primitive Type）的参数传递是按值传递（Pass by Value）的特征，不难改造出下面的代码：

// 用var实现案例2的效果
var a = [];
 
var _loop = function _loop(i) {
  a[i] = function() {
    console.log(i);
  };
};
 
for (var i = 0; i < 10; i++) {
  _loop(i);
}
a[0](); // 0

作用域链

当查找变量的时候，首先会先从当前上下文的变量对象（作用域）中查找，如果没有找到，就会从父级的执行上下文的变量对象中查找，如果还没有找到，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链

看下面这段代码：

var a = 'jack';
var b = 'andy';
function fn() {
    var a = 'frank';
    console.log(a);
    console.log(b);
}
fn();
console.log(a);

它的输出结果是 frank andy jack

第二个console.log为什么会输出全局变量andy呢？

这个时候就有了作用域链的概念了，简单的说作用域表示区域，作用域链表示次序
现在我们把眼光放在函数fn里，第一行定义了a是局部变量，第二行输出这个a，但是整个代码里定义了两个a，那么就需要刚刚说到的作用域链来决定到底先用哪个变量。
js会先看函数内有没有这个变量a，如果没有再去函数的外围看有没有这个变量，这里作用域链就帮我们安排好了这个次序。
所以，函数内定义了变量a为frank，那么第二行就会输出frank，第三行要输出变量b，我们先看函数内有没有这个变量，发现没有，再去外围发现有全局变量b，那么输出的就是这个值，我们再来看最后一console.log(a)，因为他在全局范围内，所以只能访问全局变量a。

也就是说：作用域链只能向上查找，最终找到全局。不能同级(局部)或者向下查找

我们再看这一段代码：

var a = 'jack';
function fn() {
    console.log(a);
    var a = 'andy';
    console.log(a);
}
fn();

我们思考一下会输出什么呢？结果是 undefined andy

稍微有点js经验的同学应该都会答对，因为有变量提升，变量a在第一行就被声明了，只不过没有被赋值。下面修改一下代码，下面再看看会输出什么：

var a = 'jack';
function fn() {
    console.log(a);
    var a = 'andy';
    console.log(ss());
    function ss() {
        return a;
    }
}
fn();

我们在fn函数内又添加了一个函数ss，并且在这个函数的顶部就调用了这个函数。不仅函数内声明的变量会被提升，函数内的函数也会被提升，而且函数的提升会比变量更优先

那么，在javascript中这段代码实际上是这样被执行的：

var a = 'jack';
function fn() {
    function ss() {
        return a;
    }
    var a;
    console.log(a);
    a = 'andy';
    console.log(ss());
}
fn();

先把函数声明提升到首行，再声明变量a，然后输出a，a没有被赋值，所以是undefined，然后a被赋值为'andy'，最后调用函数ss，返回的就是andy。