作用域链

2018-12-11  本文已影响0人  js好难学啊

作用域链(scope chain)

当js碰到可执行代码时,首先必然会先创建执行上下文,其中包括了

定义

The scope chain property of each execution context is simply a collection of the current context's [VO] + all parent’s lexical [VO]s.
Scope = VO + All Parent VOs
Eg: scopeChain = [ [VO] + [VO1] + [VO2] + [VO n+1] ];
简而言之, 作用域链是当前执行上下文VO以及其父级词法VO的集合。

函数的生命周期

创建阶段

就是当在预处理的时候碰到了一个函数,当前此函数并没有被执行,此时它的作用域已经被确定了。因为js使用的是词法作用域

执行阶段

当函数即将进入执行阶段之前,它会先生成函数执行上下文,即上下文的创建阶段。上下文对象中的作用域链属性也就在此刻被创建了。当执行上下文创建完毕,便进入函数的执行阶段。

内容

作用域链既然是一个集合,它存储在哪里?集合里面的内容是如何被放进去的呢?

存储在哪里?

函数有一个内部属性叫做[[scope],当在函数的创建阶段时,就会保存所有父级的变量对象到[[scope]]中。它现在已经有了除了自己本身执行上下文中的VO以外的所有VO了!

自己的VO

当创建函数执行上下文时,会先创建VO,然后将这个VO填充到作用域链的前端。

举个例子

var bar = 1
function foo() {
  var baz = 1
  console.log(baz)
}

foo()

详细步骤如下:
1.js开始执行全局执行上下文(globalContext)入栈
stack=[[globalContext]]

  1. foo函数被创建,确定作用域。保存作用域链到内置属性[[scope]]
    foo.[[scope]] = [globalContext.VO]

  2. foo函数将要被执行,首先要生成foo函数的执行上下文(fooContext)并将其压入执行栈
    stack=[[fooContext],[globalContext]],此时fooContext中属性还没有完成赋值。
    3.1 先复制foo.[[scope]]给fooContext
    此时fooContext = {scopeChain: [foo.[[scope]]]}
    3.2 确定VO
    此时

    fooContext = {
      VO: {
        arguments: {length: 0},
        baz: undefined
      },
      scopeChain: [foo.[[scope]]]
    }
    

    3.3 将VO对象放置于作用域链的前端
    此时

    fooContext = {
      VO: {
        arguments: {length: 0},
        baz: undefined
      },
      scopeChain: [VO, foo.[[scope]]]
    }
    
  3. 函数开始执行
    将VO依此赋值,并执行函数,foo执行完毕,fooContext从执行栈中弹出
    此时stack=[globalContext]

上一篇 下一篇

猜你喜欢

热点阅读