可执行代码与执行上下文

yubin11
745 阅读7分钟

什么是可执行代码

我们知道 js 是顺序执行的，但是下面例子却不是顺序执行的结果。

function foo() {
  console.log('foo1')
}
foo() // foo2

function foo() {
  console.log('foo2')
}
foo() // foo2

如果顺序执行应该输出 foo1 和 foo2 才对，但这段代码的执行结果输出了两个 foo2，那为什么会这样呢？
原来 js 虽然顺序执行，但却不是按行的顺序执行，而是按段的分析之后再执行，每一段代码即为一个可执行代码(executable code)。 那么每段是如何进行划分的呢？

可执行代码与执行上下文

这就要说到 JavaScript 的可执行代码(Executable code)的类型有哪些了？
ECMAScript 可执行代码分为三种类型：全局代码，函数代码，eval 代码。
当 js 引擎执行到一段可执行代码时，就会为之创建对应的执行上下文(Execution Context)。
那么因此执行上下文对应也有三种：全局执行上下文，函数执行上下文，eval 执行上下文。
我们首先来看看 JavaScript 是怎样来管理执行上下文的。
补充：由于eval函数很少使用，这里暂不做分析。

执行上下文栈

什么是执行上下文栈

执行上下文在调用逻辑上形成一个栈，我们称之为执行上下文栈(Execution Context Stack)。栈顶的执行上下文是正在运行的执行上下文。每当 js 引擎遇到新的函数调用时，就会创建新的执行上下文，新创建的执行上下文被压入堆栈，成为正在运行的执行上下文。当该函数执行结束时，执行上下文从栈中弹出，控制流程到达当前栈中的下一个上下文。

入栈出栈过程

让我们通过下面的代码示例来理解入栈出栈过程：

我们首先定义一个变量ecs代表执行上下文栈(Execution Context Stack)：

let ecs = []

当遇到以下代码执行时，代码的执行过程为：

function first() {
  console.log('Inside first function')
  second()
}

function second() {
  console.log('Inside second function')
}

first()
console.log('Inside Global Execution Context')

入栈出栈过程

  1. 在浏览器加载时，JavaScript 引擎创建了一个全局执行上下文globalContext并把它压入当前执行栈，此时的 ecs =[globalContext];
  2. 接着当 JavaScript 引擎遇到函数 first 调用时，将函数 first 压入栈中，此时的 ecs =[globalContext,<first> functionContext]
  3. 在函数 first 执行过程中，JavaScript 引擎遇到函数 second 被调用了，于是函数 second 也被压入栈中 ，此时的 ecs =[globalContext,<first> functionContext,<second> functionContext]
  4. 函数 second 执行结束，被推出栈外。此时的 ecs =[globalContext,<first> functionContext]
  5. 函数 first 执行结束，被推出栈外。此时的 ecs =[globalContext]
  6. 程序结束，globalContext 也被推出栈外，此时 ecs =[]

如何创建执行上下文

到现在，我们已经知道 JavaScript 是通过一个名叫执行上下文栈的栈结构来管理执行上下文的了，那么现在让我们了解 JavaScript 引擎是怎样创建执行上下文的。

创建执行上下文的分为两个阶段：

  • 创建阶段
  • 执行阶段

创建阶段

在代码执行前，会先进入创建阶段，创建阶段做了如下三件事：

  • this 绑定
  • 初始化词法环境组件
  • 初始化变量环境组件

所以执行上下文在概念上表示如下：

ExecutionContext = {
  ThisBinding = <this value>,
  LexicalEnvironment = { ... },
  VariableEnvironment = { ... },
}
this 绑定
  • 全局执行上下文 在全局执行上下文中，this 的值指向全局对象。(在浏览器中，this引用 Window 对象)。
  • 函数执行上下文 在函数执行上下文中，this 的值取决于该函数是如何被调用的。如果它被一个引用对象调用，那么 this 会被设置成那个对象，否则 this 的值被设置为全局对象或者 undefined（在严格模式下）。例如：
let foo = {
  baz: function() {
  console.log(this);
  }
}

foo.baz();   // 'this' 指向 'foo', 因为 'baz' 被 对象 'foo' 调用 

let bar = foo.baz;

bar();       // 'this' 指向全局 window 对象，因为 没有指定引用对象
词法环境组件

官方的 ES6 文档把词法环境定义为

词法环境是一种规范类型，基于 ECMAScript 代码的词法嵌套结构来定义标识符和具体变量和函数的关联。一个词法环境由环境记录器和一个外部词法环境的引用组成。

简单讲，在词法环境的内部有两个组件：(1) 环境记录器和 (2) 一个外部词法环境的引用。

  1. 环境记录器记录了当前词法环境范围内产生的标识符的绑定。标识符指变量声明，函数声明等；
  2. 外部词法环境的引用意味着它可以访问其父级词法环境（作用域）。
  • 全局执行上下文 在全局执行上下文中，环境记录器又称对象环境记录器，用来定义出现在全局上下文中的变量和函数的关系，外部环境的引用为null。
GlobalExectionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
    }
    outer: <null>     // 父级词法环境的引用
  }
}
  • 函数执行上下文 在函数执行上下文中，环境记录器又称声明式环境记录器，函数内部用户定义的变量存储在环境记录器中，如变量，常量，let，class，module，import，函数声明，以及函数参数 arguments 对象和函数参数的 length属性等。外部环境的引用可能是全局环境，或者任何包含此内部函数的外部函数。
FunctionExectionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // 在这里绑定标识符
    }
    outer: <Global or outer function environment reference>  // 父级词法环境的引用
  }
}
变量环境组件

执行上下文的 VariableEnvironment 组件 和 LexicalEnvironment组件都是词法环境。变量对象会包括：

  1. 函数的所有形参 (如果是函数上下文)

    • 由名称和对应值组成的一个变量对象的属性被创建
    • 没有实参，属性值设为 undefined

  2. 函数声明

    • 由名称和对应值（函数对象(function-object)）组成一个变量对象的属性被创建
    • 如果变量对象已经存在相同名称的属性，则完全替换这个属性

  3. 变量声明

    • 由名称和对应值（undefined）组成一个变量对象的属性被创建；
    • 如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性 对于如下的代码，
let a = 20;
const b = 30;
var c;

function multiply(e, f) {
 var g = 20;
 return e * f * g;
}

c = multiply(20, 30);

执行上下文看起来长这样：

GlobalExectionContext = {

  ThisBinding: <Global Object>,

  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
      a: < uninitialized >,
      b: < uninitialized >,
      multiply: < func >
    }
    outer: <null>
  },

  VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
      c: undefined,
    }
    outer: <null>
  }
}

FunctionExectionContext = {
  ThisBinding: <Global Object>,

  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // 在这里绑定标识符
      Arguments: {0: 20, 1: 30, length: 2},
    },
    outer: <GlobalLexicalEnvironment>
  },

VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // 在这里绑定标识符
      g: undefined
    },
    outer: <GlobalLexicalEnvironment>
  }
}

注意 ：只有遇到调用函数 multiply 时，函数 multiply的执行上下文才会被创建。

被let 和 const 定义的变量并不会没有关联任何值，如变量a和常量b设置的初始值为< uninitialized >,表示未初始化；但被 var 定义的变量被设成了 undefined，如变量c。

这就是为什么你可以在声明之前访问 var 定义的变量（虽然是 undefined），但是在声明之前访问 let 和 const 的变量会得到一个引用错误。

这就是我们说的变量声明提升。

执行阶段

在此阶段，根据代码，修改变量对象的值，最后执行代码。

还是上面的例子，当代码执行完后，这时候的 变量对象 是：

GlobalExectionContext = {

  ThisBinding: <Global Object>,

  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
      a: < uninitialized >,
      b: < uninitialized >,
      multiply: < func >
    }
    outer: <null>
  },

  VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 在这里绑定标识符
      c: undefined,
    }
    outer: <null>
  }
}

FunctionExectionContext = {
  ThisBinding: <Global Object>,

  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // 在这里绑定标识符
      Arguments: {0: 20, 1: 30, length: 2},
    },
    outer: <GlobalLexicalEnvironment>
  },

VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      // 在这里绑定标识符
      g: undefined
    },
    outer: <GlobalLexicalEnvironment>
  }
}

所以对于开头的例子，在修改变量对象的值时，后定义的foo函数，就把先定义的foo函数覆盖掉了；这就解释了为什么这段代码的执行结果输出了两个 foo2；

function foo() {
  console.log('foo1')
}
foo() // foo2

function foo() {
  console.log('foo2')
}
foo() // foo2
avatar
文章
阅读
粉丝