您的位置:澳门新葡8455最新网站 > Web前端 > 实践上下文详细图解,前端功底进级

实践上下文详细图解,前端功底进级

发布时间:2019-12-01 09:45编辑:Web前端浏览(160)

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

    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代码运行起来会首先进入该环境
    • 函数环境:当函数被调用执行时,会进入当前函数中执行代码
    • eval

    因此在一个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中的运行环境简单分类
    全局环境,执行js代码就会进入该环境
    函数环境,函数被调用就会进入该环境
    eval谁调用此方法,this就指向该对象

    在栈中,栈底永远都是全局上下文,栈顶是正在执行的上下文

    单线程中,
    同步执行,栈顶上下文处于执行,其他等待
    全局上下文只有一个,在浏览器关闭时出栈。
    执行上下文个数没限制
    函数被调用就有新上下文创建

    // 全局上下文进栈
    var color = 'blue';
    function changeColor(){
    var anotherColor = 'red';
    function swapColors(){
    var tempColor = anotherColor;
    antherColor = color;
    color = tempColor;
    }
    // swapColors进栈
    swapColors();
    // swapColors出栈
    }
    // changeColor进栈
    changeColor();
    // changeColor出栈

    函数中执行到return语句会终止可执行代码的执行,将当前上下文弹出栈

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:实践上下文详细图解,前端功底进级

    关键词:

上一篇:CSS3弹性伸缩布局

下一篇:没有了