浅析作用域链

作用域的原则

1. 函数在执行的过程中，先从自己内部找变量
2. 如果找不到，再从创建当前函数所在的作用域去找, 以此往上
3. 注意找的是变量的当前的状态

题目解析

题目一

var a = 1
function fn1(){
  function fn2(){
    console.log(a)
  }
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn() //输出多少

这道题的最终目的是执行函数fn()，而fn()是被fn1()所赋值，所以我们需要找到fn1()函数，fn1()函数中最终返回的是fn3,所以我们需要再去寻找fn3()函数，而fn3()函数中又调用了fn2()函数，我们再寻找一下fn2()，最终我们在fn2()函数中发现了输出内容——a的值。而此时此刻a的值是多少呢？在fn2()的内部并没有找到定义a的变量语句，所以我们从创建当前函数所在的作用域去找，也就是fn1()函数内，由于return在a定义之后，所以最终fn()函数打印了a的值2

题目一输出结果.png

题目二

var a = 1
function fn1(){
  function fn3(){
    var a = 4
    fn2()
  }
  var a = 2
  return fn3
}
function fn2(){
  console.log(a)
}
var fn = fn1()
fn() //输出多少

这道题的最终目的是执行函数fn()，而fn()是被fn1()所赋值，所以我们需要找到fn1()函数，fn1()函数中碰到了return，返回的是fn3,所以我们需要再去寻找fn3()函数，而fn3()函数中又调用了fn2()函数，我们再寻找一下fn2()，最终我们在fn2()函数中发现了输出内容——a的值。此刻a的值是多少呢？我们先从当前函数内寻找a的值，发现并没有。然后我们再从创建当前函数的作用域找，也就是在window下，所以最终fn()打印出a的值为1.

题目二输出结果.png

题目三

var a = 1
function fn1(){
  function fn3(){
    function fn2(){
      console.log(a)
    }
    fn2()
    var a = 4
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn() //输出多少

这道题的最终目的是执行函数fn()，而fn()是被fn1()所赋值，所以我们需要找到fn1()函数，fn1()函数中最终返回的是fn3,所以我们需要再去寻找fn3()函数，而fn3()函数中又调用了fn2()函数，我们再寻找一下fn2()，最终我们在fn2()函数中发现了输出内容——a的值。而此时此刻a的值是多少呢？我们先从fn2内部找，发现并没有定义a的值，所以我们再从创建当前函数所在的作用域去找，也就是fn3()，我们发现在fn3函数中定义了a的值为4，但是打印出的结果就是4了吗？并不是。因为这里还涉及到js的声明提前的问题，fn3()实际的过程为

function fn3(){
    function fn2(){
      console.log(a)
    } 
    var  a
    fn2()
    a = 4
  }

当fn2函数被调用并寻找a的值时，a处于被定义但是未赋值的状态，所以最终fn()的输出结果为undefined

题目三输出结果.png