菜单

JavaScript 深入之实践上下文栈

2018年11月16日 - JavaScript

而实施代码

眼看将说交JavaScript的但是实行代码(executable code)的项目有哪些了?

实在很简单,就三种,全局代码、函数代码、eval代码。

选个例子,当行到一个函数的时段,就见面进展准备工作,这里的’准备干活’,让咱们因此个重规范一点的说教,就叫”执行上下文(execution
contexts)”。

哪怕人微言轻,但为如起协调的千姿百态。

JavaScript 深入之实践上下文栈

2017/05/13 · 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

既离开简书,原因参见
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引擎并非一行一行地剖析以及行顺序,而是同样段子同样截地分析执行。当执行同一段代码的时光,会开展一个“准备工作”,比如第一个例中之变量提升,和次单例子中之函数提升。

只是本文真正想叫大家想的凡:这个”一截同样段”中之“段”究竟是怎划分的吗?

到底JavaScript引擎遇到相同截怎样的代码时才会开’准备工作’呢?

深深系列

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深入之词法作用域和动态作用域》随即首稿子最后之问题:

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地图