JS-作用域链

什么是作用域链？

当代码在一个环境中执行时，都会创建一个作用域链。 作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。整个作用域链的本质是一个指向变量对象的指针列表。作用域链的最前端，始终是当前正在执行的代码所在环境的变量对象。
　　如果这个环境是函数，则将其活动对象（activation object)作为变量对象。活动对象在最开始时只包含一个变量，就是函数内部的arguments对象。作用域链中的下一个变量对象来自该函数的包含环境，而再下一个变量对象来自再下一个包含环境。这样，一直延续到全局执行环境，全局执行环境的变量对象始终是作用域链中的最后一个对象。

3个概念

• 执行上下文sexecutionContext（或者叫全局作用域global context）
• 活动对象 AO:当前执行环境中声明的变量和函数
• Scope 属性：作用域链

范例1

1.var x = 10

2.bar()

function foo() {
  console.log(x)
}
function bar(){
  var x = 30
  3.foo() //  输出什么
}

1.
globalContext = {
    AO: {
        x:10
        foo:function
        bar:function
    },
    scope:null
}
//声明 foo 时 得到下面
foo.[[scope]] = globalContext.AO
//声明 bar 时 得到下面
bar.[[scope]] = globalContext.AO

注意： 在当前的执行上下文内声明的函数，这个函数的[[scope]]就执行当前执行上下文的 AO（活动对象）

2.
当调用 bar() 时， 进入 bar 的执行上下文

barContext = {
  AO: {
    x: 30
  },
  Scope: bar.[[scope]] //globalContext.AO  
  //当bar中调用 foo() 时，先从 bar 执行上下文中的 AO里找，找不到再从 bar 的 [[scope]]里找 找到后即调用
}

3.
当调用 foo() 时，进入 foo 的执行上下文

fooContext = {
  AO: {},
  Scope: foo.[[scope]] // globalContext.AO
}

所以 console.log(x)是 10

范例2

var x = 10;
bar() //  输出什么
function bar(){
  var x = 30;
  function foo(){
    console.log(x)
  }
  foo();
}

1.globalContext = {
  AO: {
    x: 10
    bar: function
  },
  Scope: null
}
bar.[[scope]] = globalContext.AO
注意： 在当前的执行上下文内声明的函数，这个函数的[[scope]]就执行当前执行上下文的 AO

2.当调用 bar() 时， 进入 bar 的执行上下文

barContext = {
  AO: {
    x: 30,
    foo: function
  },
  Scope: bar.[[scope]] //globalContext.AO
}
//在 bar 的执行上下文里声明 foo 时 得到下面
foo.[[scope]] = barContext.AO

3.
当调用 foo() 时，先从 bar 执行上下文中的 AO里找，找到后即调用
当调用 foo() 时，进入 foo 的执行上下文
fooContext = {
  AO: {},
  Scope: foo.[[scope]] // barContext.AO
}
所以 console.log(x)是 30