2025年Javascript 执行上下文(ES3)

大家好，我是讯享网，很高兴认识大家。

简单理解：执行上下文是评估和执行Javascript代码的环境的一个抽象概念。任何代码在JavaScript中运行时，都在执行上下文中运行。

以ES3举例，对于每个执行上下文，都有三个重要属性：

变量对象

作用域链

this

变量对象

每个执行上下文都有一个关联的变量对象，这个变量对象存储着其关联的执行上下文中定义的所有变量和方法。这个变量对象无法通过代码访问，但是后台处理数据会用到它。

作用：帮助js解析器找到我们平时调用的变量和方法

下面将结合代码一起解释

全局执行上下文

全局执行上下文：在浏览器中，全局执行上下文就是window对象

分析如下代码执行过程 console.log(a); console.log(b); var a = 10; var b = 20; function b() { }

讯享网

预编译阶段：

第一步：创建变量对象(vo)，寻找变量声明，并将变量作为键名添加给变量对象，赋值为undefined

讯享网vo = { a: undefined, b: undefined }

第二步：寻找函数声明，并将变量作为键名添加给变量对象，赋值为函数体，如果发现变量对象已经存在这个键名了，则直接覆盖掉之前的

讯享网

vo = { a: undefined, b: function b() { } }

执行阶段（输出结果）：

讯享网undefined [Function: b]

函数执行上下文

在函数执行上下文中，用活动对象表示变量对象（可以理解为当进入到到一个函数执行上下文中，这个变量对象才会激活，所以叫活动对象）。

活动对象最初只有一个定义变量arguments,指代arguments对象，调用函数时所传所有参数都会传给这个类数组对象

分析如下代码执行过程 function fn(a, d) { console.log(a) var a = 10 console.log(a) console.log(b) function a() { } if (false) { var c = 20 } console.log(c) var b = function () { } function d() { } console.log(d) } fn(1, 2)

预编译阶段：

第一步：创建活动对象(ao)，寻找形参和变量声明，作为ao的键名，赋值为undefined

讯享网ao = { a: undefined, d: undefined, c: undefined, b: undefined }

第二步：实参将会赋值给函数中对应的形参

ao = { a: 1, d: 2, c: undefined, b: undefined, }

第三步：寻找函数声明，并将变量作为键名添加给变量对象，赋值为函数体，如果发现变量对象已经存在这个键名了，则直接覆盖掉之前的

讯享网ao = { a: function a() { }, d: function d() { }, c: undefined, b: undefined, }

执行阶段（输出结果）：

[Function: a] 10 undefined undefined [Function: d]

总结：js解析器是通过变量对象（或活动对象）来找到我们平时调用的变量和方法，但我们是无法通过代码访问变量对象的。

执行上下文栈

用来管理执行上下文的栈（简称执行栈），被用来存储代码运行时创建的所有执行上下文。

当JS初始化时，会自动将全局执行上下文压入栈中（全局执行上下文在应用程序退出前才会销毁，比如关闭浏览器）之后每当调用一个函数，就会为该函数创建一个函数执行上下文并压入栈中，JS引擎会执行那些执行上下文位于栈顶的函数。当对应函数执行完毕时，会将其函数执行上下文从栈中弹出，然后将控制权返还给当前栈中的下一个上下文。

讯享网var a = 'a' function b() { console.log('Function b') c() console.log('Again Function b') } function c() { console.log('Function c') } b() console.log('window') //输出结果 Function b Function c Again Function b window

当调用b函数时，创建b的函数执行上下文，并push进执行栈中，然后输出行3。当调用c函数时，创建c的函数执行上下文，并push进执行栈中,然后输出行9,函数c执行return undefined后，其上下文弹出执行栈，然后输出行5，函数b return undefined,其上下文弹出执行栈。最后输出window

2025年Javascript 执行上下文(ES3)

相关推荐