执行上下文栈和执行上下文,执行上下文栈

JavaScript 深切之实践上下文栈

2017/05/13 · JavaScript
·
施行上下文

初稿出处: 冴羽   

已离开简书,原因参见
http://www.jianshu.com/p/0f12350a6b66。

先说说栈吧! 栈的实施顺序是先进后出,后进先出!

原版的书文出处

JavaScript浓密之实施上下文栈

梯次执行?

假设要问到JavaScript代码执行顺序的话,想必写过JavaScript的开发者都会有个直观的影像,那正是逐1执行,终归

var foo = function () { console.log(‘foo1’); } foo(); // foo1 var foo =
function () { console.log(‘foo2’); } foo(); // foo2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var foo = function () {
 
    console.log(‘foo1’);
 
}
 
foo();  // foo1
 
var foo = function () {
 
    console.log(‘foo2’);
 
}
 
foo(); // foo2

然则去看那段代码:

function foo() { console.log(‘foo1’); } foo(); // foo2 function foo() {
console.log(‘foo2’); } foo(); // foo2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function foo() {
 
    console.log(‘foo1’);
 
}
 
foo();  // foo2
 
function foo() {
 
    console.log(‘foo2’);
 
}
 
foo(); // foo2

打字与印刷的结果却是八个foo二。

刷过面试题的都知道那是因为JavaScript引擎并非一行一行地解析和施行顺序,而是1段1段地分析执行。当执行1段代码的时候,会开始展览三个“准备干活”,比如第三个例证中的变量升高,和第一个例子中的函数提高。

唯独本文真正想让大家想想的是:那几个”壹段一段”中的“段”毕竟是怎么划分的吧?

到底JavaScript引擎遭逢一段怎么着的代码时才会做’准备工作’呢?

虽微不足道,但也要有协调的姿态。

履行上下文栈 进行全局代码和函数时,都会时有发生贰个条件,叫做执行上下文。1伊始打开页面的时候。全局环境(全局执行上下文)就会入栈。当执行到函数时,该函数也会发出三个进行环境,并入栈。(即便函数里含有另3个函数,同理)等该函数执行完了,就将该函数的进行环境弹出栈,重临全局上下文环境。

可实行代码


那即将说起 JavaScript 的可实施代码(executable code)的种类有怎样了?

事实上很简单,就三种,全局代码、函数代码、eval代码执行上下文栈和执行上下文,执行上下文栈。。

举个例子,当执行到二个函数的时候,就会议及展览开准备工作,这里的“准备工作”,让我们用个更规范一点的说教,就叫做”进行上下文(execution
context)
“。

可进行代码

那即将说起JavaScript的可实施代码(executable code)的品类有啥了?

实际上相当的粗略,就三种,全局代码、函数代码、eval代码。

举个例子,当执行到多个函数的时候,就会开始展览准备工作,那里的’准备干活’,让大家用个更规范一点的布道,就叫做”执行上下文(execution
contexts)”。

小说能够在自家的 Github
https://github.com/mqyqingfeng/Blog
查看

图片 1

实践上下文栈

接下去难题来了,大家写的函数多了去了,怎么着保管创制的那么多执行上下文呢?

因此 JavaScript 引擎创造了推行上下文栈(Execution context
stack,ECS)
来管理实践上下文

为了模仿执行上下文栈的一颦一笑,让大家定义执行上下文栈是叁个数组:

ECStack = [];

试想当 JavaScript
初始要解释施行代码的时候,初阶遇到的正是大局代码,所以初阶化的时候首先就会向实施上下文栈压入2个大局执行上下文,大家用
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

施行上下文栈

接下去难点来了,我们写的函数多了去了,怎么着管理创立的那么多执行上下文呢?

故而js引擎创造了履行上下文栈(Execution context
stack,ECS)来保管实践上下文

为了模仿执行上下文栈的行为,让大家定义执行上下文栈是2个数组:

ECStack = [];

1
    ECStack = [];

试想当JavaScript起来要诠释实施代码的时候,开始蒙受的就是全局代码,所以初始化的时候首先就会向执行上下文栈压入3个大局执行上下文,让大家用globalContext表示它,并且只有当1切应用程序甘休的时候,ECStack才会被清空,所以ECStack最尾部永远有个globalContext:

ECStack = [ globalContext ];

1
2
3
    ECStack = [
        globalContext
    ];

现行JavaScript遭遇下边包车型地铁那段代码了:

function fun3() { console.log(‘fun3’) } function fun2() { fun3(); }
function fun1() { fun2(); } fun1();

1
2
3
4
5
6
7
8
9
10
11
12
13
function fun3() {
    console.log(‘fun3’)
}
 
function fun2() {
    fun3();
}
 
function fun1() {
    fun2();
}
 
fun1();

当碰着函数执行的时候,就会创设叁个推行上下文,并且压入执行上下文栈,当函数执行完结的时候,就会将函数的实践上下文从栈中弹出。知道了这样的干活原理,让大家来探视怎么着处理地点那段代码:

// 伪代码 // fun一() ECStack.push(fun1> functionContext); //
fun第11中学还是调用了fun二,还要成立fun贰的履行上下文 ECStack.push(fun二>
functionContext); // 擦,fun二还调用了fun三! ECStack.push(fun叁>
functionContext); // fun3执行完成 ECStack.pop(); // fun二执行完成ECStack.pop(); // fun1执行完结 ECStack.pop(); //
javascript接着执行下边包车型客车代码,然则ECStack底层用于有个globalContext

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 伪代码
 
// 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();

1
2
3
4
5
6
7
8
9
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()();

1
2
3
4
5
6
7
8
9
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();

1
2
3
4
ECStack.push(checkscope> functionContext);
ECStack.push(f> functionContext);
ECStack.pop();
ECStack.pop();

让大家模拟第一段代码:

ECStack.push(checkscope> functionContext); ECStack.pop();
ECStack.push(f> functionContext); ECStack.pop();

1
2
3
4
ECStack.push(checkscope> functionContext);
ECStack.pop();
ECStack.push(f> functionContext);
ECStack.pop();

是否多少差别吧?

本来,假设觉得那样不难的回应执行上下文栈的变通,如故显得不够详细,那就让我们去研商一下实施上下文到底包罗了哪些内容,欢迎期待下一篇《JavaScript深远之变量对象》

举个例证

深远体系

JavaScript深入体系猜测写105篇左右,目的在于帮我们捋顺JavaScript底层知识,重点教学如原型、效能域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等困难概念,与罗列它们的用法不相同,这么些连串更侧重通过写demo,捋进程、模拟达成,结合ES规范等办法来讲学。

全部作品和demo都得以在github上找到。假诺有荒唐恐怕不深谋远虑的地点,请务必给予指正,十三分感激。即便喜欢依然持有启发,欢迎star,对小编也是壹种鞭策。

本系列:

  1. JavaScirpt 深远之从原型到原型链
  2. JavaScript
    深切之词法效率域和动态作用域

    1 赞 1 收藏
    评论

图片 2

图片 3

当加载<script>中的代码时,全局执行环境入栈

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图