关于js中的作用域链

一个变量的作用域（scope）是程序源代码中定义这个变量的区域。简单的说，作用域就是变量与函数的可访问范围。全局变量拥有全局作用域，在JavaScript代码中的任何地方都有定义。局部变量是在函数体内声明而且只作用在函数体内部以及该函数体的子函数的变量。下面我们对全局作用域和局部作用域来做一个深入的理解

作用域链

1、作用域链变量的寻址

如果讲一个局部变量看做是自定义实现的对象的属性的话，那么可以换一个角度来理解作用域。

每一段javascript代码（全局代码或函数）都有一个与之关联的作用域链。这个作用域连是一个对象列表或者链表，这组对象定义了这段代码“作用域中”的变量。当javascript需要查找变量x的值的时候（这个过程称作“变量解析”),它会从链中的第一个对象开始查找，如果这个对象有一个名为x属性，则会直接使用这个属性的值，如果第一个对象中不存在，则会继续寻找下一个对象，依次类推。如果作用域链上没有任何一个对象含有属性x，则抛出错误（ReferenceError）异常。

image.png

2、不同的层级作用域上对象的分布

1. 在javascript的最顶层（也就是不包含任何函数定义内的代码），作用域链由一个全局对象组成。
2. 在不包含嵌套的函数体内，作用域链上有两个对象，第一个是定义函数参数和局部变量的对象，第二个是全局对象。
3. 在一个嵌套的函数体内，作用域链上至少有三个对象。当调用这个函数时，它创建一个新的对象来存储它的局部变量，它实际上保存在同一个作用域链。
4. 对于嵌套函数来讲，事情更有趣，每次调用外部函数时，内部函数又会重新定义一遍。因为每次调用外部函数的时候，作用域链都是不同的。内部函数每次定义的时候都有微妙的差别——在每次调用外部函数时，内部函数的代码都是不相同的，而且关联这段代码的作用域链也不相同。

例子

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() //输出2

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() //输出1

var a = 1
function fn1(){

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

    fn2()
    a = 4
  }
  var a = 2
  return fn3
}
var fn = fn1()
fn() //输出undefined

解密

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