JavaScript 浏览器函数执行机制：VO 到 AO

被前端耽误的全能选手

于 2023-05-16 15:33:12 发布

阅读量516

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_45777332/article/details/130706913

版权

在 JavaScript 中，函数执行的过程是非常重要的。它决定了代码在运行时的行为和结果。在浏览器环境中，函数执行过程中涉及到两个重要的概念：VO 和 AO。

VO

VO 是 Variable Object 的缩写，中文翻译为变量对象。它是在函数被调用时创建的一个对象，它的作用是存储函数内部定义的变量和函数声明。在函数执行之前，JavaScript 引擎会创建 VO，并将函数内部定义的所有变量和函数声明添加到 VO 中。

具体来说，以下是一些常见的变量和函数声明，它们会被添加到 VO 中：

变量声明：使用 var 或 let 关键字声明的变量。
函数声明：使用 function 关键字定义的函数。
形参：函数定义时声明的参数。

在 VO 中，变量和函数声明都会被存储为属性名，它们的值分别为 undefined 或函数对象。在函数执行时，JavaScript 引擎会按照以下顺序对 VO 进行处理：

创建 VO。
处理函数声明。将函数声明添加到 VO 中，并将函数对象赋值给相应的属性。
处理变量声明。将变量声明添加到 VO 中，并将 undefined 赋值给相应的属性。
处理形参。将函数参数添加到 VO 中，并将传入的实参赋值给相应的属性。
执行函数体内的代码。

AO

AO 是 Activation Object 的缩写，中文翻译为执行上下文对象。它是在函数执行时创建的一个对象，它的作用是存储函数执行过程中的变量和函数声明。在函数执行过程中，JavaScript 引擎会根据 VO 创建 AO，并在 AO 中存储函数内部的变量和函数声明。

AO 和 VO 的区别在于它们的创建时机不同。VO 是在函数被调用时创建的，而 AO 是在函数执行时创建的。在 AO 中，存储的变量和函数声明和 VO 中是一样的，但它们的值可能会发生变化。在函数执行时，变量的值会被更新，函数声明会被重新定义。

具体来说，以下是一些常见的变量和函数声明，在函数执行过程中它们会被添加到 AO 中：

变量声明：使用 var 或 let 关键字声明的变量。
函数声明：使用 function 关键字定义的函数。
形参：函数定义时声明的参数。

在函数执行时，JavaScript 引擎会按照以下顺序对 AO 进行处理：

创建 AO。
处理函数声明。将函数声明添加到 AO 中，并将函数对象赋值给相应的属性。
处理形参。将函数参数添加到 AO 中，并将传入的实参赋值给相应的属性。 4. 处理变量声明。将变量声明添加到 AO 中，并将 undefined 赋值给相应的属性。
1. 执行函数体内的代码，对变量进行赋值或操作。
需要注意的是，JavaScript 引擎在函数执行完毕后会将 AO 销毁，释放内存。因此，函数执行的结果只能通过返回值或对外部变量的修改来传递出去。

VO 和 AO 的关系

在 JavaScript 中，VO 和 AO 是相互关联的。在函数被调用时，JavaScript 引擎会创建 VO，并在函数执行时创建 AO。在 AO 中存储的变量和函数声明都可以从 VO 中获取，它们的值也可以相互影响。

需要注意的是，AO 中的变量和函数声明可能会覆盖 VO 中的同名变量和函数声明。在函数执行时，JavaScript 引擎会先在 AO 中查找变量或函数，如果找不到再到 VO 中查找。
```
javascriptCopy codefunction add(a, b) {
  var c = a + b;
  function multiply(d, e) {
    var f = d * e;
    return f;
  }
  return multiply(c, 2);
}

var result = add(1, 2);
console.log(result);
```
在上述代码中，我们定义了一个函数 add，它接受两个参数 a 和 b，并返回调用另一个函数 multiply 的结果。

在函数执行之前，JavaScript 引擎会创建 VO 并将函数内部的变量和函数声明添加到 VO 中。在函数 add 中，我们定义了三个变量和一个函数：
- 变量 a 和 b 是函数的参数。
- 变量 c 是函数内部定义的变量，用于存储 a 和 b 的和。
- 函数 multiply 是函数内部定义的另一个函数，用于计算两个参数的积。
在函数执行时，JavaScript 引擎会根据 VO 创建 AO，并在 AO 中存储函数执行过程中的变量和函数声明。在函数 add 执行时，AO 中的变量和函数声明如下：
- 变量 a 和 b 分别对应传入的实参 1 和 2。
- 变量 c 的值为 3，即 a + b 的和。
- 函数 multiply 对应函数对象，可以通过 multiply() 进行调用。
在函数 multiply 执行时，AO 中的变量和函数声明如下：
- 变量 d 和 e 分别对应调用 multiply 时传入的实参 3 和 2。
- 变量 f 的值为 6，即 d * e 的积。
最终，函数 add 返回了调用 multiply(c, 2) 的结果 6，并将其赋值给变量 result。在控制台中输出 result 的值，即可得到结果为 6。

通过以上示例，我们可以更好地理解 VO 和 AO 在 JavaScript 函数执行过程中的作用，并对其关系有更深入的了解。

结论

VO 和 AO 是 JavaScript 中函数执行的重要概念。VO 存储函数内部的变量和函数声明，在函数执行前被创建，而 AO 存储函数执行过程中的变量和函数声明，在函数执行时被创建。它们之间的关系是相互关联的，函数执行时会根据 VO 创建 AO，并在 AO 中存储变量和函数声明。在函数执行过程中，AO 中的变量和函数声明可能会覆盖 VO 中的同名变量和函数声明。