08月07, 2022
0 comments

JS进阶(3)--执行上下文

执行上下文

执行上下文，英文全称为 Execution Context，一句话概括就是“代码（全局代码、函数代码）执行前进行的准备工作”，也称之为“执行上下文环境”。

运行 JavaScript 代码时，当代码执行进入一个环境时，就会为该环境创建一个执行上下文，它会在你运行代码前做一些准备工作，如确定作用域，创建局部变量对象等。

具体做了什么我们后面再说，先来看下 JavaScript 执行环境有哪些？

JavaScript 中执行环境

  1. 全局环境
  2. 函数环境
  3. eval 函数环境 （已不推荐使用）

那么与之对应的执行上下文类型同样有 3 种：

  1. 全局执行上下文
  2. 函数执行上下文
  3. eval 函数执行上下文

JavaScript 运行时首先会进入全局环境，对应会生成全局上下文。程序代码中基本都会存在函数，那么调用函数，就会进入函数执行环境，对应就会生成该函数的执行上下文。

由于代码中会声明多个函数，对应的函数执行上下文也会存在多个。在 JavaScript 中，通过栈的存取方式来管理执行上下文，我们可称其为执行栈，或函数调用栈（Call Stack）。

栈数据结构

先来简单复习一下栈这种数据结构。

要简单理解栈的存取方式，我们可以通过类比乒乓球盒子来分析。如下图：

栈遵循“先进后出，后进先出”的规则，或称 LIFO （”Last In First Out“）规则。

如图所示，我们只能从栈顶取出或放入乒乓球，最先放进盒子的总是最后才能取出。

栈中“放入/取出”，也可称为“入栈/出栈”。

总结栈数据结构的特点：

  1. 后进先出，先进后出
  2. 出口在顶部，且仅有一个

执行栈（函数调用栈）

理解完栈的存取方式，我们接着分析 JavaScript 中如何通过栈来管理多个执行上下文。

程序执行进入一个执行环境时，它的执行上下文就会被创建，并被推入执行栈中（入栈）；程序执行完成时，它的执行上下文就会被销毁，并从栈顶被推出（出栈），控制权交由下一个执行上下文。

因为 JavaScript 在执行代码时最先进入全局环境，所以处于栈底的永远是全局环境的执行上下文。而处于栈顶的是当前正在执行函数的执行上下文。

当函数调用完成后，它就会从栈顶被推出。

而全局环境只有一个，对应的全局执行上下文也只有一个，只有当页面被关闭之后它才会从执行栈中被推出，否则一直存在于栈底

下面我们来看一段具体的代码示例：

function foo () { 
    function bar () {        
      return 'I am bar';
    }
    return bar();
}
foo();

对应图解如下：

执行上下文的数量限制（堆栈溢出）

执行上下文可存在多个，虽然没有明确的数量限制，但如果超出栈分配的空间，会造成堆栈溢出。常见于递归调用，没有终止条件造成死循环的场景。

// 递归调用自身
function foo() {
    foo();
}
foo();
// 报错： Uncaught RangeError: Maximum call stack size exceeded

执行上下文生命周期

前面我们有说到，运行 JavaScript 代码时，当代码执行进入一个环境时，就会为该环境创建一个执行上下文，它会在你运行代码前做一些准备工作。接下来我们就来看一下具体会做哪些准备工作。

具体要做的事，和执行上下文的生命周期有关。

执行上下文的生命周期有两个阶段：

  1. 创建阶段（进入执行上下文）：函数被调用时，进入函数环境，为其创建一个执行上下文，此时进入创建阶段。
  2. 执行阶段（代码执行）：执行函数中代码时，此时执行上下文进入执行阶段。

创建阶段

创建阶段要做的事情主要如下：

  1. 创建变量对象（VO：variable object）

    • 确定函数的形参（并赋值）

    • 函数环境会初始化创建 Arguments对象（并赋值）

    • 确定普通字面量形式的函数声明（并赋值）
    • 变量声明，函数表达式声明（未赋值）

  2. 确定 this 指向（this 由调用者确定）

  3. 确定作用域（词法环境决定，哪里声明定义，就在哪里确定）

这里有必要说一下变量对象。

当处于执行上下文的建立阶段时，我们可以将整个上下文环境看作是一个对象。该对象拥有 3 个属性，如下：

executionContextObj = {
    variableObject : {}, // 变量对象，里面包含 Arguments 对象，形式参数，函数和局部变量
    scopeChain : {},// 作用域链，包含内部上下文所有变量对象的列表
    this : {}// 上下文中 this 的指向对象
}

可以看到，这里执行上下文抽象成为了一个对象，拥有 3 个属性，分别是变量对象，作用域链以及 this 指向，这里我们重点来看一下变量对象里面所拥有的东西。

在函数的建立阶段，首先会建立 Arguments 对象。然后确定形式参数，检查当前上下文中的函数声明，每找到一个函数声明，就在 variableObject 下面用函数名建立一个属性，属性值就指向该函数在内存中的地址的一个引用。

如果上述函数名已经存在于 variableObject（简称 VO） 下面，那么对应的属性值会被新的引用给覆盖。

最后，是确定当前上下文中的局部变量，如果遇到和函数名同名的变量，则会忽略该变量。

执行阶段

  1. 变量对象赋值
    • 变量赋值
    • 函数表达式赋值
  2. 调用函数
  3. 顺序执行其它代码

两个阶段要做的事情介绍完毕，接下来我们来通过代码来演示一下这两个阶段做的每一件事以及变量对象是如何变化的。

const foo = function(i){
    var a = "Hello";
    var b = function privateB(){};
    function c(){}
}
foo(10);

首先在建立阶段的变量对象如下：

fooExecutionContext = {
    variavleObject : {
        arguments : {0 : 10,length : 1}, // 确定 Arguments 对象
        i : 10, // 确定形式参数
        c : pointer to function c(), // 确定函数引用
        a : undefined, // 局部变量 初始值为 undefined
        b : undefined  // 局部变量 初始值为 undefined
    },
    scopeChain : {},
    this : {}
}

由此可见，在建立阶段，除了 Arguments，函数的声明，以及形式参数被赋予了具体的属性值外，其它的变量属性默认的都是 undefined。并且普通形式声明的函数的提升是在变量的上面的。

一旦上述建立阶段结束，引擎就会进入代码执行阶段，这个阶段完成后，上述执行上下文对象如下，变量会被赋上具体的值。

fooExecutionContext = {
    variavleObject : {
        arguments : {0 : 10,length : 1},
        i : 10,
        c : pointer to function c(),
        a : "Hello",// a 变量被赋值为 Hello
        b : pointer to function privateB() // b 变量被赋值为 privateB() 函数
    },
    scopeChain : {},
    this : {}
}

我们看到，只有在代码执行阶段，局部变量才会被赋予具体的值。在建立阶段局部变量的值都是 undefined。

这其实也就解释了变量提升的原理。

接下来我们再通过一段代码来加深对函数这两个阶段的过程的理解，代码如下：

(function () {
    console.log(typeof foo);
    console.log(typeof bar);
    var foo = "Hello";
    var bar = function () {
        return "World";
    }

    function foo() {
        return "good";
    }
    console.log(foo, typeof foo);
})()

这里，我们定义了一个 IIFE，该函数在建立阶段的变量对象如下：

fooExecutionContext = {
    variavleObject : {
        arguments : {length : 0},
        foo : pointer to function foo(),
        bar : undefined
    },
    scopeChain : {},
    this : {}
}

首先确定 Arguments 对象，接下来是形式参数，由于本例中不存在形式参数，所以接下来开始确定函数的引用，找到 foo 函数后，创建 foo 标识符来指向这个 foo 函数，之后同名的 foo 变量不会再被创建，会直接被忽略。

然后创建 bar 变量，不过初始值为 undefined。

建立阶段完成之后，接下来进入代码执行阶段，开始一句一句的执行代码，结果如下：

(function () {
    console.log(typeof foo); // function
    console.log(typeof bar); // undefined
    var foo = "Hello"; // foo 被重新赋值 变成了一个字符串
    var bar = function () {
        return "World";
    }

    function foo() {
        return "good";
    }
    console.log(foo, typeof foo); //Hello string
})()

如果你觉得上面的说法过于晦涩，

执行上下文，主要是注意创建阶段的问题，并且在创建阶段，我们主要是留意Variable Object：VO，VO 中记录了该环境中所有声明的参数、变量和函数，可以记住我总结的下面三点：

1、 确定所有形参值以及特殊变量arguments 2、 确定函数中通过var声明的变量，将它们的值设置为undefined，如果VO中已有该名称，则直接忽略。 3、 确定函数中通过字面量声明的函数，将它们的值设置为指向函数对象，如果VO中已存在该名称，则覆盖。

我们通过面试题，来说明问题：

1.下面的代码输出结果是什么?

function A(a, b) {
    console.log(a, b);
    var b = 123;
    console.log(a, b);

    function b() {
        var d = 123;
    }
}

A(1, 2);

答案：

1 [Function: b]
1 123

2、下面代码输出结果是什么？

var g1 = 123;
var a = 2;
function A(a, b) {
    console.log(a, b, g1);

    var b = 123;

    function b() {}

    var a = function() {}

    console.log(a, b);
}
var g1 = 456;

A(1, 2);

答案：

1 [Function: b] 456
[Function: a] 123

3、下面代码输出结果是什么？

var foo = 1;
function bar() {
    console.log(foo);
    if (!foo) {
        var foo = 10;
    }
    console.log(foo); 
}

bar();

答案：

undefined
10

4、下面代码输出结果是什么？

var a = 1;
function b() {
    console.log(a); 
    a = 10;
    return;
    function a() { }
}
b();
console.log(a);

答案：

fn
1

5、下面代码输出结果是什么？

console.log(foo); 
var foo = "A";
console.log(foo);
var foo = function () {
    console.log("B");
}
console.log(foo); 
foo(); 
function foo(){
    console.log("C");
}
console.log(foo); 
foo();

答案：

fn  C
A
fn  B
B
fn B
B

6、下面代码输出结果是什么？

var foo = 1;


function bar(a) {
    var a1 = a;
    var a = foo;
    function a() {
        console.log(a); 
    }
    a1();
}

bar(3);

答案：

1

本文链接：http://www.yanhongzhi.com/post/js_ap_9.html

-- EOF --

作者 admin 发表于 2022-08-07 23:33:33 ，添加在分类 JavaScript进阶 下 ，并被添加「 JavaScript 」标签 ，最后修改于 2022-08-07 23:33:33

Comments