菜单

JavaScript深远之实施上下文栈

2019年10月21日 - CSS/CSS3

深远类别

JavaScript深远体系估算写十五篇左右,意在帮大家捋顺JavaScript底层知识,着重讲明如原型、功用域、实行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、承袭等问题概念,与罗列它们的用法差别,这一个种类更讲究通过写demo,捋进度、模拟达成,结合ES规范等方法来说课。

具有小说和demo都能够在github上https://github.com/mqyqingfeng/Blog找到。即使有不当恐怕不一步一个足迹的地方,请必得给与指正,十二分多谢。假若喜欢依然持有启迪,款待star,对小编也是黄金时代种驱策。

本系列:

  1. JavaScirpt 深入之从原型到原型链
  2. JavaScript
    浓密之词法功能域和动态功用域

    1 赞 1 收藏
    评论

图片 1

虽人微权轻,但也要有和谐的势态。

可举办代码

这将在聊到JavaScript的可试行代码(executable code)的项目有何了?

实在相当的轻便,就二种,全局代码、函数代码、eval代码。

例如,当实行到一个函数的时候,就能实行盘算工作,这里的’计划干活’,让大家用个更标准一点的说法,就称为”实施上下文(execution
contexts)”。

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

逐个施行?

假设要问到JavaScript代码实践各样的话,想必写过JavaScript的开荒者都会有个直观的纪念,那正是各类试行,究竟

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

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

刷过面试题的都领会那是因为JavaScript引擎并非黄金年代行大器晚成行地深入分析和执行顺序,而是如火如荼段黄金年代段地深入分析施行。当实践意气风发段代码的时候,会实行叁个“谋算干活”,比方第2个例证中的变量升高,和第二个例子中的函数升高。

可是本文真正想让大家想想的是:那一个”旭日初升段大器晚成段”中的“段”毕竟是怎么划分的吧?

到底JavaScript引擎境遇如火如荼段怎么样的代码时才会做’策动干活’呢?

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

施行上下文栈

接下去难点来了,大家写的函数多了去了,如何保管成立的那么多试行上下文呢?

因此js引擎创造了进行上下文栈(Execution context
stack,ECS)来管理实施上下文

为了模仿施行上下文栈的一举一动,让大家定义奉行上下文栈是三个数组:

ECStack = [];

1
    ECStack = [];

试想当JavaScript起始要分解实行代码的时候,最早蒙受的便是全局代码,所以初步化的时候首先就能向实行上下文栈压入多少个大局推行上下文,让大家用globalContext表示它,何况唯有当全部应用程序甘休的时候,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();

当蒙受函数实施的时候,就能创设二个实行上下文,而且压入施行上下文栈,当函数实施实现的时候,就能将函数的施行上下文从栈中弹出。知道了如此的劳作规律,让我们来看看哪些管理地方这段代码:

// 伪代码 // 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

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 深远之推行上下文栈

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

最早的文章出处: 冴羽   

解答思虑题

好啊,到此截至,大家曾经领悟了实行上下文栈如什么地点理实行上下文的,所以让咱们看看《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长远之变量对象》

相关文章

发表评论

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

网站地图xml地图