执行上下文栈
js代码执行顺序是什么,大部分人都知道同步执行
var foo = function(){
console.log('foo1');
}
foo(); // foo1
var foo = function(){
console.log('foo2');
}
foo() // foo2
然后看以下下面代码
function foo(){
console.log('foo1');0
}
foo();// foo2
function foo(){
console.log('foo2');
}
foo() // foo2
js 引擎 执行代码是 一段一段分析执行;不是一行一行执行的 当一段代码执行完毕后, 会进行一个准备工作,比如:第一个例子,变量提升,第二个例子中, 函数声明提升
准备工作:变量提升,函数提升
问题:段 是如何划分的? 准备工作是什么时候进行的呢?
可执行代码
这就要说到 JavaScript 的可执行代码(executable code)的类型有哪些了?
其实很简单,就三种,全局代码、函数代码、eval代码。
举个例子,当执行到一个函数的时候,就会进行准备工作,这里的“准备工作”,让我们用个更专业一点的说法,就叫做"执行上下文(00context)"。
执行上下文栈
接下来问题来了,我们写的函数多了去了,如何管理创建的那么多执行上下文呢?
所以 JavaScript 引擎创建了执行上下文栈(Execution context stack,ECS)来管理执行上下文
为了模拟执行上下文栈的行为,让我们定义执行上下文栈是一个数组
ECStack = [];
假设当 JavaScript 开始要解释执行代码的时候,最先遇到的就是全局代码,所以初始化的时候首先就会向执行上下文栈添加一个全局执行上下文,我们用 globalContext 表示它,并且只有当整个应用程序结束的时候,ECStack 才会被清空,所以程序结束之前, ECStack 最底部永远有个 globalContext:
// 模拟将全局执行上下文添加到执行上下文栈中
ECStack = [
globalContext
];
现在 js 引擎 遇到下面的这段代码了:
function foo3() {
console.log('foo3')
}
function foo2() {
foo3();
}
function foo1() {
foo2();
}
foo1();
当执行一个函数的时候,就会创建一个执行上下文,并且添加执行上下文栈,当函数执行完毕的时候,就会将函数的执行上下文从栈中弹出。知道了这样的工作原理,让我们来看看js引擎如何处理上面这段代码:
模拟js引擎执行代码
foo1()
ECStack.push(<foo1> functionContext);
foo1中竟然调用了foo2,还要创建foo2的执行上下文
ECStack.push(<foo2> functionContext);
foo2还调用了foo3!创建 foo3执行上下文
ECStack.push(<foo3> functionContext);
ECStack= [globalContext,foo1<functionCountext>,foo2<functionCountext>,foo3<funcrtionCountext>]
foo3执行完毕 foo3执行上下文销毁
ECStack.pop();
ECStack= [globalContext,foo1<functionCountext>,foo2<functionCountext>]
foo2执行完毕 foo2执行上下文销毁
ECStack.pop();
ECStack= [globalContext,foo1<functionCountext>]
foo1执行完毕,foo1执行上下文销毁
ECStack.pop();
ECStack= [globalContext]
javascript接着执行下面的代码,但是ECStack底层永远有个globalContext
关闭浏览器 关闭应用程序
ECStack.pop()
ECStack = []
执行上下文
1: 作用域链 scope
2: 变量对象 GO AO (预编译)
3: this
执行上下文一旦销毁,以上3个内容都销毁
js (从浏览器编译角度)
js 是一个【解析型】语言。js 解析语言的方式,
问题 解析的过程是什么?
- 第一个过程:语言分析。分析代码中是否有【语法错误】,如果有则抛出错误
- 第二个过程:预编译:
- 底层创建对象,Global [Active Objec] ==== 变量对象
- 打开浏览器运行代码前:创建 GO, 提升函数 变量声明提升,作为Go对象下属性
- 函数执行时;创建AO ,提升形参 提升函数声明,提升变量声明,形参实参相统一
- 第三个过程:解析【执行】
- 从上往下的执行。对Go 或者 AO 中属性重新赋值过程
- 函数执行完毕时,AO 销毁。
- 浏览器关闭时,GO 销毁
执行上下文栈
执行上写文栈:管理所有的执行上下文对象
js 的代码执行有什么特点? js 代码的代码执行是一段一段的执行,一段一段的分析执行,在执行一段断码前【准备工作】
准备工作:变量提升,函数声明提升
js代码执行是通过什么进行管理的呢?例如:谁创建GO Ao,js引擎具体如何工作呢
- 执行上下文栈
这里的【一段】具体值得是什么?可以理解:如何划分“段”
- 浏览器打开初始化 段:全局
- 函数特别多,当执行一个函数时候;为一个【段】
*到底js引擎遇到什么代码会进行【准备工作】呢
- 创建执行上下文
- 执行上下文中包含:作用域链 scope ,变量对象(GO AO),this
js代码执行特点 1:一段一段执行的,段,有执行上下文栈管理,每段中的执行上下,执行上下文中有,作用域链 scope ,变量对象(GO AO),this。函数执行前创建 函数执行上下文;执行完毕时候执行上下文销毁。
在执行上下文栈 底层一直存在 globalContext ,只有应用程序关闭才销毁
执行上下文
分类
- 全局执行上下文
- 局部执行上下文
每个执行上下文包含哪些内容
- 作用域链 scope
- 变量对象
- this