JS执行上下文(execution context)是JS解释器在处理JS代码时,创建的一个对象,用来管理和维护当前代码的执行环境,包括当前作用域内的变量、函数声明、this指向和外部环境等相关信息。本文将通过两条实例,来深入了解JS执行上下文的运行原理。
在JS解释器执行JS代码之前,首先会创建一个全局上下文(Global Execution Context),作为根上下文来管理整个JS代码运行期间的执行环境。在执行过程中,如果发现某段JS代码需要开启新的执行上下文,那么JS解释器会根据以下两个步骤,来创建新的执行上下文对象:
创建新的执行上下文对象时,JS解释器会先为其创建一个空白的执行上下文对象(Execution Context Object)。执行上下文对象通常是一个包含三个属性的对象,分别是变量对象(Variable Object)、作用域链(Scope Chain)和this指向(This Value)。
创建完成后,JS解释器会解析执行当前上下文中的JS代码,将代码、变量和函数声明等信息,加入到对应的执行上下文中。在此过程中,JS解释器会按照以下步骤进行:
考虑以下JS代码:
var a = "Hello";
(function() {
var b = "JavaScript";
function inner() {
console.log(a + " " + b);
}
inner();
})();
在执行此代码时,JS解释器会按照如下过程:
a
并赋值"Hello"
,保存在全局上下文的变量对象中。(anonymous)
,JS解释器会创建一个新的执行上下文对象(Execution Context Object)。(anonymous)
的执行上下文中,JS解释器先创建变量b
,并将其保存在执行上下文的变量对象中。同时,JS解释器还会将inner
函数声明创建并保存在执行上下文的变量对象中。接着,JS解释器会根据作用域链原理,将全局上下文(Global Execution Context)的变量对象添加到当前上下文的作用域链中。inner
函数时,JS解释器会进入inner
函数的执行上下文。在此执行上下文中,JS解释器会先在当前执行上下文的变量对象中查找变量a
和b
,找不到时,会沿着作用域链依次查找外部环境的变量对象,直到找到为止。inner
函数后,JS解释器跳回(anonymous)
的执行上下文中,当代码执行完毕后,当前执行上下文被销毁。考虑以下JS代码:
var a = "Global a";
var b = "Global b";
function outer() {
var a = "Outer a";
function inner() {
var b = "Inner b";
console.log(a + " " + b);
}
inner();
}
outer();
console.log(a + " " + b);
在执行此代码时,JS解释器会按照如下过程:
a
并赋值"Global a"
,创建变量b
并赋值"Global b"
,保存在全局上下文的变量对象中。outer
函数的执行上下文。在此执行上下文中,JS解释器会先创建变量a
,并将其保存在执行上下文的变量对象中。同时,JS解释器还会将inner
函数声明创建并保存在执行上下文的变量对象中。接着,JS解释器会根据作用域链原理,将全局上下文(Global Execution Context)的变量对象添加到当前上下文的作用域链中。inner
函数时,JS解释器会进入inner
函数的执行上下文。在此执行上下文中,JS解释器会先创建变量b
,并将其保存在执行上下文的变量对象中。此时,执行上下文的作用域链为:inner
执行上下文对象变量对象 -> outer
执行上下文对象变量对象 -> 全局上下文对象变量对象。因此,变量a
会沿着作用域链向外查找,从而找到outer
函数中的a
变量。而变量b
则直接从当前执行上下文的变量对象中获取。inner
函数后,JS解释器跳回outer
函数的执行上下文中,当函数执行完毕后,当前执行上下文被销毁。a
和b
,并输出结果。通过以上两个示例,我们可以清晰地了解JS执行上下文的创建和运行原理,这对理解JS代码的运行机制,有着非常重要的意义。