要想较为深入地了解JavaScript,理解执行上下文是必不可少的步骤,那么,什么是执行上下文?
执行上下文可以理解为js代码的运行环境,js代码运行时一定会进入相对应的执行上下文之中。
了解执行上下文
分类
js代码可以分为全局代码和局部代码,与之相对应的就是全局执行上下文和局部执行上下文。
全局执行上下文,顾名思义,即打开某一页面时默认进入的执行上下文,全局执行上下文在一个页面中只有一个。
局部执行上下文,也叫函数执行上下文,即js代码运行进入某一个函数时所处的执行上下文,一个页面可有多个。
eval函数执行上下文,目前已基本不会使用,不再赘述。
执行上下文运作方式
为了理解执行上下文的运作方式,用一段简单的代码来做说明。
let a=2;
let b=3;
let c=1;
function f(a,b,c){
console.log(a+b+c);
}
f(a,b,c);
在chrome浏览器中对该程序做调试:
页面开始运行,此时进入全局执行上下文

代码继续向下执行,当进入f函数体之后:

可以清晰的看到,此时进入名为f的局部可执行上下文。
通过这个栗子,相信读者已经对执行上下文的运作方式有了自己的理解,值得一提的是,
局部执行上下文可以在一个页面内存在多个
如果我们多个函数有嵌套声明调用的情况,就会出现多个局部执行上下文
function f(){
function g(){
console.log("执行");
}
g()
}
f();

执行上下文的组成部分
局部执行上下文有以下几个部分组成:
- 函数内部定义的变量,
- arguments,
- 函数内部定义的函数
- 函数的父级函数的执行上下文(如果函数没有父级函数,那它的父级就是全局执行上下文)
全局上下文的组成部分:
- 全局代码定义的变量,
- 全局代码定义的函数
由组成部分就可以推测出:执行上下文为代码运行提供数据。
执行上下文运作过程
通过上面两个部分,读者应该对执行上下文有了初步理解,在本章节,笔者会用栗子对执行上下文的运作过程(执行上下文栈)做简要解读。
在开始这一部分之前,我们要先对栈有所了解,可以把栈理解为一种线性的容器,类似茶杯。
假设我们做如下动作:
-
1.向茶杯里装一个乒乓球
-
2.再向茶杯里装第二个乒乓球
-
3.向茶杯中装第三个乒乓球
现在我们有一个装了三个乒乓去的茶杯
那么如果要取出乒乓球,应该按什么顺序呢?

没错,我们会按照3号->2号->1号的次序取出,如果能理解这个“乒乓球模型”,那么恭喜你,你已经明白了栈的重要特点:即后进先出。
OK,可以正式开始了
还是上面的代码:
function f(){
function g(){
console.log("执行");
}
g()
}
f();
页面跑起来!
- 全局代码执行,产生一个全局执行上下文。
- 调用函数f()产生一个f函数执行上下文。f函数执行上下文会放在全局执行上下文的上面。
- 调用函数g()产生一个g函数执行上下文。g函数执行上下文会放在f函数执行上下文的上面。

当函数调用完成时,它们会按照相反的入栈顺序去出栈。
One More Thing~
既=既然我们已经初步了解了执行上下文,那么对js的运作原理便也可管中窥豹、可见一斑,那么,可以用执行上下文来解释为什么函数内的变量,在函数的外部无法访问吗?
上文有所提及,执行上下文为代码运行提供数据,函数定义的变量会存在于函数执行上下文中,在函数外调用该变量时,其所对应的执行上下文无法为其提供这个变量,所以自然就无法访问。
结束
理解执行上下文是深入学习js的必要步骤,希望能有所帮助。