介绍下作用域链

介绍一下JavaScript作用域链？

1. 什么是作用域链

• 每个函数都有自己的 执行环境 ，当执行流执行到一个函数时，函数的环境就会被推入到一个 环境栈 中，而在函数执行之后，栈将其环境弹出，将控制权返给之前的执行环境；
• 当代码在一个环境中访问时，会创建变量对象的一个 作用域链 。作用域链的用途，就是 保证对执行环境有权访问的所有变量和函数的有序访问 ；作用域链的前端，始终都是 当前执行代码所在环境的变量对象 。如果这个变量是函数，则将其活动对象作为变量对象；活动对象在最开始时只包含一个变量，即argumnets对象（这个对象在全局环境中是不存在的）。作用域链中的下一个变量对象来自包含环境，在下一个变量对象则来自再下一个包含环境。这样，一直延续到 全局执行环境。全局执行环境始终是作用域链中的最后一个对象。

const color = 'red'
const function = sayColor(){
  const innerColor = 'blue'
  console.log(color)
}
sayColor()  // 'red'

• 在上面的例子中，sayColor()的作用域链中包含两个变量对象，他自己的活动对象（其中包含着argumnets对象）和全局环境的变量对象
• 可以在函数内部访问到变量color，就是因为可以在这个作用域链中找到他；
• 内部环境可以通过作用域链访问所有的外部环境，但是外部环境不能访问内部环境的任何变量和函数；这些环境之间的联系是线性的，有次序的，每个环境都可以向上搜索作用域链，以查询变量和函数名； 但是任何环境都不能向下搜索作用域链而进入另一个执行环境；

2. 延长作用域链

• 虽然执行环境的类型只有两种，全局和局部（函数），但还是有其他方法来延长作用域链，这么说是因为，可以通过一些手段，在作用域链的前端，临时增加一个变量对象，这个变量对象会在代码执行之后被移除。这两种情况下会发生这种现象，具体来说，当执行流进行到下面任何一个语句时，作用域链就会得到加长；
  • try-catch语句的catch块
  • with语句
• 这两个方法都会在作用域链的前端增加一个变量对象。对with语句来说，会将指定的对象添加到作用域链中。对ctach语句来说，会创建一个新的变量对象，其中包含的是被抛出的错误对象的变量声明；

function basicUrl(){
  var qs = 'haha';
  with(location){
    return url = href + qs
  }
  return url;
}
basicUrl()
// "http://localhost:4000/Blog/haha"

• 在此，with 语句接收的是location对象，因此其变量对象中包含了location的所有属性和方法，而这个变量对象被添加到了作用域链的前端。basicUrl()函数中定义了一个变量qs,当在with语句中引用变量href时（实际引用的是location.href）,可以在当前执行环境的变量对象中找到；当引用变量qs时，引用的则是basicUrl中定义的 qs,而该变量位于函数环境的变量对象中。至于with语句内部，则定义了一个名为url的变量，因此url就成为了函数执行环境的一部分，所以可以作为函数的值被返回。

function compare(value1, value2) {
  if (value1 > value2) {
    return 1;
  } else if (value1 < value2) {
    return -1;
  } else {
    return 0;
  }
}
const result = compare(2, 3);

• 全局环境的变量对象始终存在，而象compare()函数这样的局部环境的变量对象，仅在函数执行的过程中存在。在创建compare()函数时，会创建一个预先包含全局变量对象的作用域链，这个作用域链被保存在内部的 [[Scope]] 属性中。当调用compare()函数时，回味函数创建一个执行环境，然后通过复制 [[Scope]] 属性中的对象，构建起执行环境的作用域链。此后，又有一个活动对象（在此作为变量对象使用）被推入执行环境作用域链的前端。
• 对于这个例子中的compare()函数的执行环境而言，其作用域链包含两个变量对象，本地活动对象和全局变量对象。
• 作用域链本质上是一个指向变量对象的指针列表，他只引用但不实际包含变量对象
• 无论什么时候在函数中搜索一个变量时，就会从作用域链中搜索具有相应名字的变量，一般来讲，当函数执行完毕后，局部活动对象就会被销毁，内存中仅保存全局作用域(全局环境的活动对象)，但是闭包的情况有所不同