Scope(作用域)

144 阅读3分钟

作用域就是当前的执行上下文。是值和表达式在其中“可见”或可被访问到的上下文。如果一个变量或者其他表达式不在当前作用域中,那么它就是不可用的。

对于每个执行上下文,都有三个重要属性:

  • 变量对象(Variable object, VO)
  • 作用域链(Scope chain)
  • this

执行上下文与作用域

变量或函数的上下文决定了它们可以访问哪些数据,以及它们的行为。每个上下文都有一个关联的变量对象(Variable object),在当前上下文中定义的 所有变量和函数都存在于这个对象中。

在浏览器中,window对象就是全局上下文。

  • var定义的全局变量和函数会成为window对象的属性和方法。
  • let和const定义的顶级声明不会定义在全局上下文中。

作用域链

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

上下文中的代码在执行时,会创建变量对象的一个作用域链(scope chain)。这个作用域链决定了各级上下文中的代码在访问变量和函数时的顺序。 上下文的变量对象始终位于作用域链的最前端。作用域链中的下一个变量对象来自包含上下文,再下一个对象来自再下一个包含上下文。以此类推直至全局上下文; 全局上下文的变量对象始终是作用域链的最后一个变量对象。

举个例子,整理一下函数执行上下文中作用域链和变量对象的创建过程:

var scope = 'global scope'
function checkScope() {
  var scope2 = 'local scope'
  return scope2
}
checkScope()

执行过程:

  1. checkScope函数被创建,内部属性[[scope]]保存函数的作用域链
checkScope.[[scope]] = [
  globalContext.VO
]
  1. 执行checkScope函数,创建checkScope函数执行上下文,checkScope函数执行上下文被压入执行上下文栈
ECStack = [
  checkScopeContext,
  globalContext
]
  1. 复制函数[[scope]]属性创建作用域链
checkScopeContext = {
  Scope: checkScope.[[scope]]
}
  1. 用 arguments 创建活动对象,随后初始化活动对象,加入形参、函数声明、变量声明
checkScopeContext = {
  // AO: 活动对象(activation object)
  AO: {
    arguments: {
      length: 0
    },
    scope2: undefined
  },
  Scope: checkScope.[[scope]]
}
  1. 将活动对象放在checkScope作用域链顶端
checkScopeContext = {
  AO: {
    arguments: {
      length: 0
    },
    scope2: undefined
  },
  Scope: [AO, [[Scope]]]
}
  1. 执行函数,修改AO的属性值
checkScopeContext = {
  AO: {
    arguments: {
      length: 0
    },
    scope2: 'local scope'
  },
  Scope: [AO, [[Scope]]]
}
  1. 拿到scope2的值,返回后函数执行完毕,函数上下文从执行上下文栈中弹出
ECStack = [
  globalContext
]

参考链接