js执行上下文

我们通过引擎执行知道代码执行走向,但是他具体是怎么执行的呢

这就要从他的执行上下文(execution context)来说起来。

执行上下文

执行一段代码，就会存在上下文。上下文主要分为两种:

global context
function context

看下图，比较直观

可以很清楚的看到，最外层的就是全局上下文，函数里的是function context, 里面的execution context 就是 function execution context.

我们应该知道，这段代码可以访问上下文之外的代码(变量，函数…), 但是外部却无法获取内部的变量等，这是为什么?

execution context stack

我们前面说过，浏览器是单线程在执行，一次只能做一件事，后面的需要排队进入execution stack。

看下面的例子:

可以看到，执行的上下文会放入 execution context 去执行，如果当前的额上下文执行结束，就会回到前一个上下文去执行，直到全局上下文结束。

关于execution stack的五个点：
- 单线程
- 同步执行
- 一个全局上下文
- 可以无数个函数上下文
- 每个函数的调用都会创建一个上下文，包括自调用

执行上下文详解

上面说了，每次调用函数时都会创建一个上下文。js的解释器对于上下文的执行分了两个阶段.

创建阶段 Creation Stage
这个发生在调用函数的时候，并且在执行内部任何代码之前。
- 创建作用域链(Scope chain)
- 创建变量，函数，参数…
- 确定当前上下文的this
代码执行阶段(Activation / Code Execution Stage)
- 分配值，引用函数和解释/执行代码。

上面的创建阶段，可以这么理解

executionContextObj = {
    'scopeChain': { /* 变量对象加上父级上线问的变量对象 */ },
    'variableObject': { /* 函数的参数，内部的方法变量声明等 */ },
    'this': {}
}

Activation / Variable Object [AO/VO]

上面的executionContextObj是在调用函数并且真正的执行函数之前创建的，也就是在Creation Stage创建的。
这里解释器会扫描传入的参数和内部的变量声明以及函数声明，最终的结果是在executionContextObj中生成variableObject.生成 VO(variableObject)的过程
需要经过AO(activation object)阶段。

简单的来概述下解释器是怎么来处理的.

运行代码来调用函数
在执行代码函数执行，先去创建上下文.
进入创建阶段
- 初始化作用域链
- 创建变量对象(vo)
- 创建arguments对象，检查当前上下文的参数，初始化名称和值并创建引用副本
- 扫描当前上下文的函数声明
  - 扫描到来函数声明，那就在vo(variable object)里创建他的名称，并且指针是指向内存中函数引用的地址
  - 如果扫描的函数声明已存在，那就覆盖vo中的引用指针
- 扫描当前上下文的变量声明
  - 扫到变量声明，在vo中添加变量名称，并且初始化值是undefined
  - 如果vo中存在变量名称，那就不做处理，继续扫描
- 确定当前上下文的this指向
激活/执行阶段
- 在上下文中运行/解释函数，并在代码逐行执行时分配变量值。

在上面的VO的时候可以发现，函数是被特殊照顾了, 先于变量的处理，所以为啥在变量提升的时候，函数被提到函数顶部了，所以，函数是第一等公民，哈哈

下面来看一个例子:

function foo(i) {
    var a = 'hello';
    var b = function privateB() {

    };
    function c() {

    }
}

foo(22);

当调用foo(22)的时候，创建阶段看起来类似于下面这样

fooExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: undefined,
        b: undefined
    },
    this: { ... }
}

可以发现，在创建阶段, 对于变量，是初始化为undefined, 但是对于传递进来的参数却是不同，他是直接赋值。zai这里创建阶段完成之后，就会进入激活/执行阶段。

fooExecutionContext = {
    scopeChain: { ... },
    variableObject: {
        arguments: {
            0: 22,
            length: 1
        },
        i: 22,
        c: pointer to function c()
        a: 'hello',
        b: pointer to function privateB()
    },
    this: { ... }
}

关于提升(Hoisting)

(function() {

    console.log(typeof foo);
    console.log(typeof bar);

    var foo = 'hello',
        bar = function() {
            return 'world';
        };

    function foo() {
        return 'hello';
    }

}());

为什么一个是function 一个是undefined.你可能会说是因为变量提升，现在我们知道了上面的知识，可以回答了。

为什么我们可以在申明foo之前访问到他？

很简单，在代码执行阶段(Activation / Code Execution Stage)，我们已经过了创建阶段的VO过程，这时候是undefined.

为什么foo被声明了两次，显示的是function，却不是undefined或者string

在VO阶段，我们知道函数的处理会在变量的前面，在变量进行AO(activation object)的时候，VO已经存在了。对于变量，如果存在同名属性，就会向下扫描。

为什么bar是undefined

因为在AO的过程，对于变量是需要初始化为undefined存在VO里。

原文:

不错的外链:

执行上下文

execution context stack

执行上下文详解

Activation / Variable Object [AO/VO]

关于提升(Hoisting)

猜你喜欢