JavaScript深入之执行上下文栈
来源:互联网 发布:单片机c51简易数字钟 编辑:程序博客网 时间:2024/05/17 08:30
顺序执行?
如果要问到 JavaScript 代码执行顺序的话,想必写过 JavaScript 的开发者都会有个直观的印象,那就是顺序执行,毕竟:
var foo = function () { console.log('foo1');}foo(); // foo1var foo = function () { console.log('foo2');}foo(); // foo2
然而去看这段代码:
function foo() { console.log('foo1');}foo(); // foo2function foo() { console.log('foo2');}foo(); // foo2
打印的结果却是两个 foo2。
刷过面试题的都知道这是因为 JavaScript 引擎并非一行一行地分析和执行程序,而是一段一段地分析执行。当执行一段代码的时候,会进行一个“准备工作”,比如第一个例子中的变量提升,和第二个例子中的函数提升。
但是本文真正想让大家思考的是:这个“一段一段”中的“段”究竟是怎么划分的呢?
到底JavaScript引擎遇到一段怎样的代码时才会做“准备工作”呢?
可执行代码
这就要说到 JavaScript 的可执行代码(executable code)的类型有哪些了?
其实很简单,就三种,全局代码、函数代码、eval代码。
举个例子,当执行到一个函数的时候,就会进行准备工作,这里的“准备工作”,让我们用个更专业一点的说法,就叫做”执行上下文(execution context)“。
执行上下文栈
接下来问题来了,我们写的函数多了去了,如何管理创建的那么多执行上下文呢?
所以 JavaScript 引擎创建了执行上下文栈(Execution context stack,ECS)来管理执行上下文
为了模拟执行上下文栈的行为,让我们定义执行上下文栈是一个数组:
ECStack = [];
试想当 JavaScript 开始要解释执行代码的时候,最先遇到的就是全局代码,所以初始化的时候首先就会向执行上下文栈压入一个全局执行上下文,我们用 globalContext 表示它,并且只有当整个应用程序结束的时候,ECStack 才会被清空,所以 ECStack 最底部永远有globalContext:
ECStack = [ globalContext];
现在 JavaScript 遇到下面的这段代码了:
function fun3() { console.log('fun3')}function fun2() { fun3();}function fun1() { fun2();}fun1();
当执行一个函数的时候,就会创建一个执行上下文,并且压入执行上下文栈,当函数执行完毕的时候,就会将函数的执行上下文从栈中弹出。知道了这样的工作原理,让我们来看看如何处理上面这段代码:
// 伪代码// fun1()ECStack.push(<fun1> functionContext);// fun1中竟然调用了fun2,还要创建fun2的执行上下文ECStack.push(<fun2> functionContext);// 擦,fun2还调用了fun3!ECStack.push(<fun3> functionContext);// fun3执行完毕ECStack.pop();// fun2执行完毕ECStack.pop();// fun1执行完毕ECStack.pop();// javascript接着执行下面的代码,但是ECStack底层永远有个globalContext
解答思考题
好啦,现在我们已经了解了执行上下文栈是如何处理执行上下文的,所以让我们看看上篇文章《JavaScript深入之词法作用域和动态作用域》最后的问题:
var scope = "global scope";function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f();}checkscope();
var scope = "global scope";function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f;}checkscope()();
两段代码执行的结果一样,但是两段代码究竟有哪些不同呢?
答案就是执行上下文栈的变化不一样。
让我们模拟第一段代码:
ECStack.push(<checkscope> functionContext);ECStack.push(<f> functionContext);ECStack.pop();ECStack.pop();
让我们模拟第二段代码:
ECStack.push(<checkscope> functionContext);ECStack.pop();ECStack.push(<f> functionContext);ECStack.pop();
是不是有些不同呢?
当然了,这样概括的回答执行上下文栈的变化不同,是不是依然有一种意犹未尽的感觉呢,为了更详细讲解两个函数执行上的区别,我们需要探究一下执行上下文到底包含了哪些内容,所以欢迎阅读下一篇《JavaScript深入之变量对象》。
- 3.JavaScript深入之执行上下文栈
- JavaScript深入之执行上下文栈
- JavaScript 深入之执行上下文
- 7.JavaScript深入之执行上下文
- 深入理解javascript执行上下文
- 深入理解javascript 执行上下文
- 深入理解Javascript之执行上下文(E…
- 深入理解Javascript之执行上下文(E…
- 深入理解javascript之执行上下文(execution context)
- 深入理解javascript(一)-- 之执行上下文(execution context)
- 深入理解javascript之执行上下文(execution context)
- 深入理解Javascript之执行上下文(Execution Context)
- 深入理解javascript(11):执行上下文栈
- JavaScript执行上下文,执行上下文栈
- JavaScript知识点之执行上下文
- 深入理解javascript执行上下文 下篇
- 【看了一篇解释javascript中的上下文对象的,比较深刻】深入理解Javascript之执行上下文(Execution Context)
- javascript之原型与原型链、执行上下文与执行上下文栈
- HDU 6197 LIS
- 网页在Safari快速滚动和回弹的原理:-webkit-overflow-scrolling:touch;的实现
- int main(int argc,char *argv[])函数介绍
- 数据脱敏
- Servlet笔记——(1.4.2)GET请求协议
- JavaScript深入之执行上下文栈
- activeMQ指南针_发布activeMQ的可视化运行维护工具:activeMQ_Spanner
- 面试题58. 二叉树的下一个节点
- python中的zip函数
- 关于windows程序设计的一些问题
- Dubbo介绍
- 前端限制上传文件的大小
- 开通博客
- 【demo】新建一个springboot项目最简单的方法