【JavaScript】JavaScript 运行原理剖析

秀秀_heo

已于 2025-02-17 09:43:21 修改

阅读量795

点赞数 24

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2025-02-10 11:00:06 首次发布

本文链接：https://blog.youkuaiyun.com/XiugongHao/article/details/145545519

版权

JavaScript 专栏收录该内容

126 篇文章

订阅专栏

执行上下文

JavaScript引擎会在执行代码之前，会在堆内存中创建一个全局对像：Global Object(GO)

该对象所有的作用域(scope)都可以访问，在浏览器中这个对象就是window；里面会包含Date、Array、StringNumber、setTimeout、setInterval等等；其中还有一个window属性指向自己；

JavaScript 引擎内部有一个执行上下文栈(Execution Context Stack,简称ECS)，它是用于执行代码的调用栈。

全局的代码块为了执行会构建一个Global Execution Context(GEC); GEC会被放入到ECS中执行；

GEC被放入到ECS中里面包含两部分内容：

第一部分：在代码执行前，在parser转成AST的过程中，会将全局定义的变量、函数等加入到GlobalObject 中，但是并不会赋值；
这个过程也称之为变量的作用域提升(hoisting)
第二部分：在代码执行过程中，对变量赋值，或者执行其他的函数；

VO

每一个执行上下文会关联一个VO(Variable Object,变量对象)，变量和函数声明会被添加到这个VO对象中。

当全局代码被执行的时候，VO就是GO对象了。

var message = "why"
function foo() {
    var message = "foo"
    console.log(message)
}
var num1 = 10
var num2 = 20
var result = num1 + num2
console.log(result)
foo()

全局代码执行前：

全局代码执行后：

AO

VO是一个执行上下文中的概念。
在全局执行上下文中，VO=GO。
在函数执行上线文中，VO=AO。

在执行的过程中执行到一个函数时，就会根据函数体创建一个函数执行上下文（Functional Execution Context,简称FEC)，并且压入到EC
Stack中。因为每个执行上下文都会关联一个VO，那么函数执行上下文关联的VO是什么呢？

当进入一个函数执行上下文时，会创建一个AO对象(Activation Object):
这个AO对象会使用arguments作为初始化，并且初始值是传入的参数；
这个AO对象会作为执行上下文的VO来存放变量的初始化；

因此上述的代码，也可以分为函数执行前和函数执行后。

函数执行前：

函数执行后：

作用域链

当进入到一个执行上下文时，执行上下文也会关联一个作用域链(Scope Chain)

作用域链是一个对象列表，用于变量标识符的求值；
当进入一个执行上下文时，这个作用域链被创建，并目根据代码类型，添加一系列的对象；

作用域链：

闭包

定义：一个普通的函数function，如果它可以访问外层作用域的自由变量，那么这个函数和它的作用域的组合就是一个闭包；
从广义的角度来说：JavaScript中的函数+外层作用域都是闭包；
从狭义的角度来说：JavaScript中一个函数，如果有访问外层作用域的变量，那么它的组合是一个闭包；

上图是右边代码的整个执行过程：

第一步：全局代码的执行

在 JavaScript 代码运行时，首先会创建 全局执行上下文（Global Execution Context），并将其压入 执行上下文栈（ECS，Execution Context Stack） 中。

1.1 全局执行上下文（Global Execution Context）

创建阶段
- 创建
  
  GO（Global Object，全局对象）
```
GO = {
  height: undefined,
  outer: function outer() {...}, // 赋值函数引用
  fn: undefined
}
```
- this 指向 window（浏览器环境）或 globalThis（Node.js 环境）。
- 建立作用域链：ScopeChain = [GO]
执行阶段
- var height = 1.88 → GO.height = 1.88
- 声明 function outer，GO.outer 指向 outer 函数的内存地址。
- var fn = outer() 执行 outer()。

第二步：执行 outer()

当 outer() 被调用时，会创建一个新的 执行上下文（outer Execution Context），并压入 执行上下文栈（ECS）。

2.1 outer() 执行上下文

创建阶段
- 创建
  
  AO（活动对象，Activation Object）
```
AO = {
  age: undefined,
  inner: function inner() {...} // 赋值函数引用
}
```
- 作用域链：ScopeChain = [AO, GO]
- this 指向 window（浏览器环境）。
执行阶段
- var age = 18 → AO.age = 18
- 声明 function inner，AO.inner 指向 inner 函数的内存地址。
- return inner → outer() 返回 inner 的引用，赋值给 fn。

由于 inner 被返回，outer() 退出，但 inner 的作用域链仍然保留 AO，形成闭包。

执行上下文栈状态

ECS:
1. 全局执行上下文（Global Execution Context）

第三步：执行 fn()

此时 fn === inner，所以 fn() 实际上执行的是 inner()。

3.1 inner() 执行上下文

创建阶段
- 创建
  
  AO（活动对象）
```
AO = {
  name: undefined
}
```
- 作用域链：ScopeChain = [AO, outer.AO, GO]
- this 指向 window（浏览器环境）。
执行阶段
- var name = "why" → AO.name = "why"
- console.log(name, age, height)
  - name 在 inner() 的 AO 中找到，值为 "why"。
  - age 在 inner() 的 AO 中找不到，向上在 outer() 的 AO 中找到，值为 18。
  - height 在 inner() 和 outer() 的 AO 中找不到，向上在全局对象 GO 中找到，值为 1.88。
- 输出结果
```
why 18 1.88
```

总结

1. 执行上下文栈（ECS）的变化

执行 outer()

ECS:
1. Global Execution Context
2. outer Execution Context

outer() 返回 inner 后，outer 退出
```
ECS:
1. Global Execution Context
```

执行 fn()，即 inner()

ECS:
1. Global Execution Context
2. inner Execution Context

inner() 运行完毕后，退出
```
ECS:
1. Global Execution Context
```

2. 作用域链（Scope Chain）

inner() 的作用域链
```
[inner.AO, outer.AO, GO]
```
变量查找顺序
1. name 在 inner.AO 中找到。
2. age 在 inner.AO 中找不到，向上查找 outer.AO，找到 age = 18。
3. height 在 inner.AO 和 outer.AO 都找不到，向上查找 GO，找到 height = 1.88。

3. this 指向

outer() 和 inner() 中的 this 均指向 window（浏览器）或 globalThis（Node.js）。

4. 闭包

fn() 实际上就是 inner，它仍然能访问 outer() 作用域中的 age 变量，因为 inner() 的作用域链包含 outer.AO。
inner() 形成了闭包，因为它在 outer() 作用域执行完毕后，仍然能访问 outer() 的变量，也正因为后续不需要执行 fn，但是 fn 对 inner 存在引用，inner 又对 AO1 存在引用，故内存不会被释放，造成内存泄漏。
解决内存泄漏：将 fn = null ;

AO 对象不会被销毁时，里面的没有用到的属性会被释放。

变量提升笔试题

// 1.
var n = 100
function foo() {
    n = 200
}
foo()
console.log(n) // 200

// 2.
function foo() {
    console.log(n) // undefined 因为自身作用域链中n为undefined
    var n = 200
    console.log(n) // 200
}
var n = 100
foo()

// 3.
var n = 100
function foo1() {
    // 作用域链是定义时确定 而不是调用时确定
    console.log(n) // 100 foo1的作用域链:[foo1AO, GO]
}
function foo2() {
    var n = 200
    console.log(n) // 200
    foo1()
}
foo2()
console.log(n) // 100

// 4.
var a = 100
function foo() {
    console.log(a) // undefined
    return
    var a = 100
}
foo()

// 5.
function foo() {
    var a = b = 100
    // 相互于
    // var a = 100 // 该函数 AO 中
    // b = 100 // 全局对象 GO 中（js自带的问题）
}
foo()
console.log(a) // 报错
console.log(b) // 100

新的 ECMA 代码执行描述（ES5 及以上）

在之前学习JavaScript代码执行过程（ECMAScript 3）中，我们学习了很多ECMA文档的术语：

执行上下文栈：Execution Context Stack,用于执行上下文的栈结构；
执行上下文：Execution Context,代码在执行之前会先创建对应的执行上下文；
变量对象：Variable Object,上下文关联的VO对象，用于记录函数和变量声明；
全局对象：Global Object,全局执行上下文关联的VO对象；
激活对象：Activation Object,函数执行上下文关联的VO对象；
作用域链：scope chain,作用域链，用于关联指向上下文的变量查找；

现在新的 ECMA（ES5 及以上）中只有执行上下文和执行上下文栈还保持原有说法，其他的说法都变了。以下是最新的说法。

词法环境是一种规范类型，用于在词法嵌套结构中定义关联的变量、函数等标识符；

一个词法环境是由环境记录(Environment Record)和一个外部词法环境(outer Lexical Environment)组成；
一个词法环境经常用于关联一个函数声明、代码块语句、try-catch语句，当它们的代码被执行时，词法环境被创建出来；

ES6开始，执行一个代码，会关联的词法环境是：LexicalEnvironment 和 VariableEnvironment 。

LexicalEnvironment 用于处理 let、const 声明的标识符。
VariableEnvironment 用于处理 var 和 function 声明的标识符。

环境记录：声明式环境记录和对象环境记录。

声明式环境记录：声明性环境记录用于定义ECMAScripti语言语法元素的效果，如函数声明、变量声明和直接将标识符绑定与ECMAScript 语言值关联起来的Catch子句（比如 const let var function ）。
对象式环境记录：对象环境记录用于定义ECMAScript 元素的效果，例如 WithStatement 将标识符绑定与某些对象的属性关联起来（with语句）。

ES2023~ES2025 的说法

LexicalEnvironment 和 VariableEnvironment 这两个组件"始终是环境记录(Environment Records)”，意味着不再通过其他结构（如词法环境）间接管理标识符的绑定。

全局执行上下文关联的是一个全局环境记录 Global Environment Record ，包含一个声明环境记录（let const）和一个对象环境记录（var function），全局环境记录的[[OuterEnv]] 指向 null，表明自己是作用域链的最外层。

查找顺序：在查找一个变量名N时：

首先会在Declarative Environment Record中查找。
若Declarative Environment Record中存在该绑定，则直接返回true，即查找成功。
如果Declarative Environment Record中没有找到该绑定，才会继续在Object Environment Record中查找。

函数环境记录(Function Environment Record)是声明式环境记录(Declarative Environment Record)

这意味着在函数的执行过程中，只会有一个环境记录，这个环境记录就是声明式环境记录。

那么一个声明式环境记录(Declarative Environment Record)是如何区分函数中存放的var变量、Iet/consti这些的呢？

CreateMutableBinding:用于创建var变量的可变绑定
CreateImmutableBinding:用于创建let和const变量的不可变绑定。

不可变绑定指的是一旦这个绑定（也就是这个名字到这个变量的关联）被创建后，它的绑定关系是不可改变的。
具体来说，一旦通过CreateImmutableBinding创建了绑定，你不能用同样的名字再次创建另一个绑定，且在初始化，之前，不能访问或修改这个绑定。

变量提升面试题

概念：变量提升（Hoisting)是 JavaScript 中的一个行为，它使得函数声明和变量声明（使用var关键字声明的变量）在代码执行前被提前到其作用域的顶部。

这意味着无论声明实际上出现在何处，都会被视为在当前作用域的开始处声明：
需要注意的是，仅仅是声明被提升，初始化或赋值仍然会在代码中声明的位置执行。

原因：

变量提升的存在主要是由于 JavaScript 的解释特性决定的。
在到 JavaScript 早期版本中，解释器会通过两个阶段处理代码：编译阶段和执行阶段。
在编译阶段，解释器会先读取并处理所有的声明，而在执行阶段，才会处理实际的逻辑代码。
这种设计使得在同一作用域内的变量和函数可以在声明之前被引用，从而提供了一定程度的灵活性。

但这也是 js 语言的设计缺点，导致代码运行结果不直观。因此后面我们更多的使用 const let 来声明变量，他们不会发生变量提升。

变量提升的缺陷：

变量覆盖问题：在同一作用域内，如果不小心重复声明变量，由于变量提升，后面的声明会覆盖前面的声明（尽管实际赋值不会被提升）

这可能会导致调试时难以发现错误，因为没有直接的错误提示。（在早期的avaScript开发中经常出现）
意外行为：如果某坐开发者不了解变量提升的机制，可能会误以为变量的赋值也被提升了，这可能导致逻辑上的错误。
函数声明的混淆：函数提升意味着函数声明可以在函数实际定义之前调用。

如果在同一作用域内有多个同名函数，可能导致预期外的函数版本被执行，因为后声明的函数会提升会覆盖之前的版本。
可读性和维护性降低：变量提升可能导致代码的逻辑难以理解。

因为变量和函数可以在声明之前被引用，这使得在阅读代码时难以立即识别变量的定义位置和作用域，增加了追踪变量声明位置的难度。

作用域和闭包面试题

作用域(Scope)是编程中一个非常重要的概念，它描述在代码中定义变量的区域，这个区域决定了变量的可访问性和生命周期。简单来说，就是作用域定义了代码块中变量的访问权限。

在 JavaScript 中，作用域控制着变量和函数的可见性以及它们可以被访问的部分。

在 JavaScript 中有如下几种常见的作用域类型：

全局作用域(Global Scope)：当变量在代码中的任何函数外部声明时，它就拥有全局作用域。这意味着任何代码的任何部分都可以访问这些全局变量。全局作用域的变量在页面关闭前一直存在，并且过多的全局变量可能导致命名冲突和维护困难问题。
函数作用域(Function Scope)：在函数内部声明的变量具有函数作用域，这意味着这些变量只能在函数内部被访问。函数参数也具有函数作用域。
块级作用域(Block Scope)：使用Iet和const声明的变量具有块级作用域，即这些变量仅在其包含的 {} 块中可见。这是ES6的新增特性，对于管理局部变量非常有用，尤其是在循环和条件语句中。
模块作用域(Module Scope)：在ES6模块中，顶层声明的变量、函数、类等不是全局的，而是模块内部的。这些声明只在模块内部可见，除非被导出。

作用域链(Scope Chain)是 JavaScript 中的一个基本概念，它用于确定当前执行代码的上下文中变量的查找和访问机制。

作用域链的构建基于词法作用域的结构，即变量和函数的可见性由它们在源代码中的位置决定。
在 JavaScript 中，每个执行上下文（如函数执行上下文) 都有一个与之关联的作用域链。
这个作用域链是一个包含多个环境记录(Environment Record)的列表。
当前执行上下文的环境记录在链的最前端，如果当前作用域中没有找到某个变量，解释器就会沿着作用域链向上查找，直到达到全局作用域。如果全局作用域中也没有找到，则会产生一个引用错误。

作用域链使得函数可以记住并访问它被定义时的作用域，即使该函数在不同的上下文中被调用。这是闭包(Closures)的核心原理和前提。

闭包是一个函数+外层作用域环境形成了闭包。在 JavaScript 中，每当我们创建一个函数，闭包也会在函数创建的同时被创建出来，这是广义的定义；而狭义的定义就是当我们需要在函数内部访问外部作用域的自由变量，可以直接访问到，就形成了闭包。

闭包存在的原因：
如果没有闭包，那么访问外层作用域中的变量就会受到非常多的限制，也非常的不方便。

闭包的存在就让我们可以非常自然的访问外层作用域中的变量，不需要通过参数传递进来。
那么就会造成很多函数的参数是非常繁多和庞杂的，函数本身会变得非常复杂和难以维护。
那么之后的代码会造成非常的混乱，代码的可维护性、可扩展性、可读性都会变差。

开发中闭包的使用和遇到的问题：

如果不了解闭包的原理的话就容易造成内存泄露。

比如我们通过一个内层函数引用了外层作用域函数的 AO 或者ER（环境记录)，而之后不再使用该内层函数时，我们需要将其置为null。
如果没有进行这样的操作，很容易造成内存的世漏，因为AO或者ER被长期引用着而无法得到释放。
这个时候我们应该让开发组员在平时开发的时候就养成良好的编码习惯，并且进行codreview来保证代码质量。
因为内存优化或者性能优化不是一蹴而就的，它往往需要我们平时开发时就多注意，一旦真正遇到了大的性能问题再亡羊补牢，往往为时已晚。
代码优化起来就会非常的困难，并且很难重构。

代码执行过程面试题

执行上下文(Execution Context)是JavaScript执行过程中最重要的概念之一。它指的是在代码执行时，JavaScript引擎所创建的一种“环境”。

执行上下文的类型：

全局执行上下文(Global Execution Context): 在JavaScript程序运行时创建的默认上下文。它包含全局对象（在浏览器中是window对象)和this关键字。
函数执行上下文(Function Execution Context):每当一个函数被调用时，会创建一个新的执行上下文。每个函数都有自己的执行上下文，包含函数的局部变量、参数、以及内部函数声明。

在执行过程中会创建很多的内容，比如 VO、Scope Chain、this绑定，或者VE、LE、ER(具体解释它们是做什么的)。

执行上下文如何影响JavaScript代码的执行？

当JavaScript引l擎开始执行一段代码时，首先会创建一个执行上下文。在这个阶段，变量和函数声明会被提升（Hoisting), 即它们会在代码执行前被放入变量对象中。var声明的变量会被初始化为undefined，而let和const变量则不会被初始化。
在执行阶段，JavaScript引擎会按照代码的顺序逐行执行。变量会被赋予实际的值，函数会被调用。执行上下文在此过程中保持对当前作用域链的跟踪，以便在需要时解析标识符。
JavaScript引擎使用一个栈来管理多个执行上下文。当全局代码开始执行时，全局执行上下文被推入栈顶。当调用函数时，会为该函数创建一个新的函数执行上下文，并推入栈顶。函数执行完毕后，其执行上下文会从栈中弹出，控制权返回到之前的上下文。

JavaScript 代码执行过程：（ES3, ES6, ES2025）

创建全局对象
全局对象执行
函数代码执行

JavaScript 执行过程中的一些术语：

AO Activation Object
激活对象(Activation Object)是一个较老的术语，用于表示函数执行上下文中的变量对象(Variable Object,VO)。在现代ECMAScript规范中，AO已经被VO取代，但它们本质上指的是同一个概念。

作用：它存储了函数内部声明的所有变量、函数声明和参数。每当函数被调用时，都会创建一个新的激活对象。

GO Global Object
全局对象(Global Object)是在全局执行上下文中创建的对象。浏览器环境下的全局对象是window, 在Node.js环境下是global。

作用：GO包含了全局范围内的所有变量和函数声明，此外还包括一些内置对象（如 Math、Date)和全局函数（如setTimeout、parselnt)。

VO Variable Object
变量对象(Variable Object,Vo)是一个执行上下文中的抽象概念，它包含了函数或全局作用域内声明的变量、函数声明和参数。VO是在执行上下文创建阶段构建的。

作用：在全局执行上下文中，VO是全局对象(GO); 在函数执行上下文中，VO是激活对象(AO)。

LE Lexical Environment
词法环境(Lexical Environment,LE)是ECMAScript标准中的一个结构，用来存储变量和函数声明的环境。词法环境由两个部分组成：环境记录(Environment Record,ER)和对外部环境的引用（即outer环境)。

作用：LE用来跟踪代码执行期间的标识符和它们的绑定。在代码执行过程中，词法环境被用于确定变量和函数在作用域链中的位置。

VE Variable Environment
变量环境(Variable Environment,VE)与词法环境类似，但专门用于追踪var声明的变量。与词法环境不同的是，变量环境仅用于存储var声明，而不包括let和const。.

作用：在函数的执行上下文中，VE记录了所有var声明的变量，并且这些变量具有函数作用域。

ER Environment Record
环境记录(Environment Record,ER)是词法环境和变量环境的组成，用来存储变量、函数声明以及它们的绑定关系。

作用：ER包含了关于当前环境中所有标识符（变量名和函数名）及其对应值的记录。ER可以是声明式环境记录(Declarative Environment Record), 用于存储普通变量和函数，也可以是对象环境记录（Object Environment Record), 用于处理像with语句这样的情况。

var const let 面试题

都是用于声明变量（标识符）的关键字。

作用域(Scope)

var:声明的变量具有函数作用域，即在整个包含函数内部都可见。如果在函数外部使用var声明变量，该变量具有全局作用域。
Iet和const:这两者声明的变量具有块级作用域(block scope), 即只在包含它们的代码块（由花括号{}界定）内部可见。

提升（Hoisting)

var：变量提升发生在var声明的变量上，这意味着无论在函数的哪个位置声明变量，变量都会被视为在函数顶部声明（但不初始化，如果提前使用，则值为undefined)。
let和const: 虽然技术上也会提升，但它们被限制在一个称为“暂时性死区”(Temporal Dead Zone,TDZ)的区域，直到实际的代码行被执行并且变量被声明。在声明之前访问这些变量会导致ReferenceError。

重新赋值

var和Iet:使用这两个关键字声明的变量可以在后续被重新赋值。
const:声明的变量必须在声明时初始化，并且一旦赋值后不能被重新赋值。尝试改变const 变量的值会导致运行时错误。

重新声明

var 在相同的作用域内可以多次声明同一个变量，后面的声明会覆盖前面的声明。声明的变量具有函数作用域，即在整个包含函数内部都可见。如果在函数外部使用var声明变量，该变量具有全局作用域。
Iet和const:这两者声明的变量具有块级作用域(block scope), 即只在包含它们的代码块（由花括号{}界定）内部可见。