JavaScript执行上下文:
JavaScript代码在执行的过程中,会创建一个执行上下文(execution context),用来管理和执行代码。
执行上下文分为三种类型:
-
全局执行上下文(Global Execution Context):在代码执行之前创建,一直存在于整个页面的生命周期中。包含全局变量、函数声明以及其它一些信息。
-
函数执行上下文(Function Execution Context):每当一个函数被调用时,都会创建一个对应的函数执行上下文。函数执行上下文会在函数执行之前被创建,然后在函数执行完毕后被销毁。
-
Eval执行上下文(Eval Execution Context):由eval()函数执行时所创建的执行上下文。
执行上下文的创建和销毁过程如下:
-
创建阶段:在创建阶段,JavaScript引擎会创建执行上下文,并进行一系列的初始化操作,包括创建变量对象、确定作用域链、初始化this值等。
-
执行阶段:在执行阶段,JavaScript引擎会根据代码的执行顺序逐行执行其中的语句。
作用域链(Scope Chain):
作用域链是一种特殊的数据结构,用来管理变量和函数的访问权限。
在JavaScript中,每个执行上下文都有一个特殊的对象,叫做变量对象(Variable Object),用来存储变量和函数的声明。
作用域链的构建过程如下:
-
在函数执行上下文中,会先创建一个名为“变量对象”的对象,并将其作为当前上下文的变量对象。
-
如果当前函数中存在内部函数,那么每个内部函数都会创建它自己的变量对象,并被添加到作用域链的顶端,形成一个链式结构。
-
在变量对象中,会按照以下顺序存储变量和函数的声明:函数参数->函数声明(function declaration)->变量声明(var, let, const)。
-
作用域链的顶端是全局执行上下文的变量对象。
当访问一个变量时,JavaScript引擎会首先在当前上下文的变量对象中查找,如果找不到就会沿着作用域链向上查找,直到找到全局执行上下文的变量对象。
总结:
JavaScript执行上下文是管理和执行代码的机制,包括全局执行上下文、函数执行上下文和Eval执行上下文。
作用域链是一种用来管理变量和函数的访问权限的数据结构,由变量对象构成,形成链式结构。在访问变量时,会沿着作用域链向上查找。
以下是一个示例代码,演示了JavaScript执行上下文和作用域链的概念:
var globalVariable = "Global"; // 全局变量
function outerFunction() {
var outerVariable = "Outer"; // 外部函数变量
function innerFunction() {
var innerVariable = "Inner"; // 内部函数变量
console.log(innerVariable); // 访问内部变量
console.log(outerVariable); // 访问外部变量
console.log(globalVariable); // 访问全局变量
}
innerFunction(); // 调用内部函数
}
outerFunction(); // 调用外部函数
在这个示例中,首先定义了一个全局变量 globalVariable
,然后定义了一个外部函数 outerFunction
。在 outerFunction
中又定义了一个内部函数 innerFunction
。
当调用 outerFunction
时,会创建一个函数执行上下文,并将其添加到作用域链中。在 outerFunction
的执行过程中,调用了 innerFunction
,又会创建一个新的函数执行上下文,并将其添加到作用域链的顶端。所以在 innerFunction
中可以访问到其内部变量、外部变量和全局变量。
执行上述代码,控制台会输出以下结果:
Inner
Outer
Global
这说明内部函数 innerFunction
可以通过作用域链访问到其所在作用域和上级作用域的变量。