菜单

前者基础进阶(二):执行上下文详细图解

2018年12月19日 - JavaScript

前端基础进阶(二):执行上下文详细图解

2017/02/21 · 基础技术 ·
行上下文

原文出处: 波同学   

图片 1

先行照便放张图

俺们于JS学习初期或者面试的当儿通常会逢考核变量提高的思考题。比如事先来一个简练一点底。

JavaScript

console.log(a); // 这里汇合打印出什么? var a = 20;

1
2
console.log(a);   // 这里会打印出什么?
var a = 20;

暂先不管这个事例,我们事先引入一个JavaScript中极其基础,但还要为是极其重点的一个概念实践上下文(Execution
Context)

每回当控制器转到然而实施代码的时节,就会进入一个履行上下文。执行上下文可以清楚啊当下代码的执行环境,它会见形成一个功效域。JavaScript中之周转条件大概连两种植情况。

为此当一个JavaScript程序中,必定会有两个实施上下文,在本人的达成一致首稿子中呢出提到,JavaScript引擎会因为堆栈的方法来处理它们,这一个库房,大家遂其为函数调用栈(call
stack)。栈底永远都是全局上下文,而栈顶就是眼前方推行的上下文。

现代码在履进程被,遭遇上述二种植情景,都相会变一个进行上下文,放入栈中,而处在栈顶的上下文执行完毕之后,就晤面自动出栈。为了进一步分明的解是历程,按照下边的例证,结合图示给大家映现。

JavaScript

var color = ‘blue’; function changeColor() { var anotherColor = ‘red’;
function swapColors() { var tempColor = anotherColor; anotherColor =
color; color = tempColor; } swapColors(); } changeColor();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var color = ‘blue’;
 
function changeColor() {
    var anotherColor = ‘red’;
 
    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }
 
    swapColors();
}
 
changeColor();

俺们用ECStack来表示处理实施上下文组的库。大家好爱懂,第一步,首先是大局上下文入栈。

图片 2

首先步:全局上下文入栈

大局上下文入栈之后,其中的而是尽代码初步施行,直到撞了changeColor(),这无异词激活函数changeColor成立它和谐的举行上下文,因而次步就是是changeColor的推行上下文入栈。

图片 3

亚步:changeColor的施行上下文入栈

changeColor的内外文入栈之后,控制器先河举行中的可是实施代码,碰着swapColors()其后又激活了一个进行上下文。由此第三步是swapColors的推行上下文入栈。

图片 4

老三步:swapColors的执行上下文入栈

在swapColors的但是实施代码中,再没有赶上任何可以相当成执行上下文的情,因而就段代码顺利实施了,swapColors的上下文从栈中弹出。

图片 5

季步:swapColors的履行上下文出库

swapColors的实施上下文弹出后,继续执行changeColor的但尽代码,也向来不更遇上任何执行上下文,顺利执行完毕之后弹出。这样,ECStack中就是只身下全局上下文了。

图片 6

第五步:changeColor的推行上下文出库

大局上下文在浏览器窗口关闭后出栈。

专注:函数中,遭逢return能直接住可实施代码的履,由此相会直接拿手上齐生文弹出栈。

图片 7

成套过程

详见询问了此过程后,大家虽好对履行上下文总结一些结论了。

为巩固一下推行上下文的知情,我们又来绘制一个例子的嬗变过程,这是一个简易的闭包例子。

JavaScript

function f1(){ var n=999; function f2(){ alert(n); } return f2; } var
result=f1(); result(); // 999

1
2
3
4
5
6
7
8
9
function f1(){
    var n=999;
    function f2(){
        alert(n);
    }
    return f2;
}
var result=f1();
result(); // 999

因f1中之函数f2以f1的然而尽代码中,并从未叫调用执行,因此举行f1平日,f2无会师改进的上下文,而结束result执行时,才创制了一个新的。具体演化过程如下。

图片 8

上例衍生和变化过程

产一致篇随笔继续总结实践上下文的创导进程以及变量对象,求持续关注和点赞,谢谢我们。

前端基础进阶系列目录

前者基础进阶序列我会持续更新,欢迎大家关注自己公众号isreact,新的稿子更新了我会在民众号里第一时间通告大家。也接我们来简书关注自己。

1 赞 2 收藏
评论

图片 9

大家在JS学习初期或者面试的早晚平日会遇上考核变量提高的思考题。比如事先来一个简单易行一点底。

console.log(a);   // 这里会打印出什么?
var a = 20;

暂先不管这些事例,我们事先引入一个JavaScript中最为基础,但同时为是无与伦比重要之一个概念执行上下文(Execution
Context)。

老是当控制器转至可进行代码的时,就谋面进来一个执上下文。执行上下文可以了解为当下代码的行环境,它会形成一个成效域。JavaScript中的运作环境大概连三种植情况。

就此在一个JavaScript程序中,必定会发八只实施上下文,在自己之达标同一首作品被为发生关系,JavaScript引擎会因堆栈的法来拍卖它们,这一个库房,我们遂该也函数调用栈(call
stack)。栈底永远都是全局上下文,而栈顶就是时正值行之上下文。

当代码在实施过程中,遭逢以上三栽情形,都会师转移一个尽上下文,放入栈中,而远在栈顶的上下文执行了后,就会自行出栈。为了更清楚的知道这多少个过程,遵照下边的例子,结合图示给大家呈现。

var color = 'blue';

function changeColor() {
    var anotherColor = 'red';

    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }

    swapColors();
}

changeColor();

咱所以ECStack来表示处理实施上下文组的堆栈。大家大轻领悟,第一步,首先是大局上下文入栈。

图片 10

首先步:全局上下文入栈

全局上下文入栈之后,其中的而是尽代码起头执行,直到碰到了changeColor(),这等同句激活函数changeColor始建它好的施行上下文,因而次步就是是changeColor的实践上下文入栈。

图片 11

第二步:changeColor的行上下文入栈

changeColor的上下文入栈之后,控制器开端实施中的但是实施代码,碰着swapColors()从此将来还要激活了一个实践上下文。因而第三步是swapColors的实践上下文入栈。

图片 12

老三步:swapColors的尽上下文入栈

于swapColors的只是实施代码中,再无碰到其他可以充足成执行上下文的情状,由此就段代码顺利实施了,swapColors的上下文从栈中弹出。

图片 13

季步:swapColors的尽上下文出库

swapColors的推行上下文弹出之后,继续执行changeColor的可实施代码,也绝非重新相见其他执行上下文,顺利进行完毕之后弹出。那样,ECStack中就是只身下全局上下文了。

图片 14

第五步:changeColor的推行上下文出库

大局上下文在浏览器窗口关闭后出栈。

瞩目:函数中,遭逢return能一贯住可举办代码的尽,因而会面直接以眼前达到产卵文弹出栈。

图片 15

总体经过

详细询问了是过程后,大家就是可对实施上下文总括一些定论了。

以加固一下执行上下文的明亮,我们再度来绘制一个例证的演变过程,这是一个简练的闭包例子。

function f1(){
    var n=999;
    function f2(){
        alert(n); 
    }
    return f2;
}
var result=f1();
result(); // 999

因为f1中的函数f2于f1的而实施代码中,并无给调用执行,因而举行f1常,f2请勿会晤成立新的上下文,而截止result执行时,才创设了一个初的。具体演变过程如下。

图片 16

上例衍生和变化过程

习过程中遇什么问题要想博得学习资源的说话,欢迎插足学习互换群
343599877,大家一同学前端!

相关文章

发表评论

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

网站地图xml地图