js执行上下文

xixi0条评论 34 次浏览

JavaScript执行上下文
先引入一个JavaScript中最基础,但同时也是最重要的一个概念执行上下文(Execution Context)。
每次当控制器转到可执行代码的时候,就会进入一个执行上下文。执行上下文可以理解为当前代码的执行环境,它会形成一个作用域。JavaScript中的运行环境大概包括三种情况。

全局环境:JavaScript代码运行起来会首先进入该环境
函数环境:当函数被调用执行时,会进入当前函数中执行代码
eval:不建议使用,可忽略

因此在一个JavaScript程序中,必定会产生多个执行上下文,JavaScript引擎会以栈的方式来处理它们,这个栈,我们称其为函数调用栈(call strack)。栈底永远都是全局上下文,而栈顶就是当前正在执行的上下文。

当代码在执行过程中,遇到以上三种情况,都会生成一个执行上下文,放入栈中,而处于栈顶的上下文执行完毕之后,就会自动出栈。

执行上下文可以理解为函数执行的环境,每一个函数执行时,都会给对应的函数创建一个这样一个执行环境。

    var color = "blue"; 

    function changeColor(){

        var anotherColor = "red";

        function swapColors(){

            var tempColor = anotherColor;

            anotherColor = color;

            color = tempColor;

        }

        swapColors();

    }

    changeColor()

我们用ECStrack来表示处理执行上下文组的堆栈。第一步,首先是全局上下文入栈。
avatar
全局上下文入栈之后,其中可执行代码开始执行,直到遇到了changeColor(),这一句激活函数changeColor创建它自己的执行上下文,因此第二步就是changeColor的执行上下文入栈。
avatar
changeColor的上下文入栈之后,控制器开始执行其中的可执行代码,遇到swapColors()之后又激活了一个执行上下文。因此第三步是swapColors的执行上下文入栈。
avatar
在swapColors的可执行代码中,再没有遇到其他能生成执行上下文的情况,因此这段代码顺利执行完毕,swapColors的上下文从栈中弹出。
avatar
swapColors的执行上下文弹出之后,继续执行changeColor的可执行代码,也没有再遇到其他执行上下文,顺利执行完毕之后弹出。这样,ECStrack就只剩下全局上下文了。
avatar
全局上下文在浏览器窗口关闭后出栈。

注意:函数中,遇到return能直接终止可执行代码的执行,因此会直接将当前上下文弹出栈。

avatar

详细了解了这个过程之后,我们就可以对执行上下文总结:

(1)单线程;
(2)同步执行,只有栈顶的上下文处于执行中,其他上下文需要等待;
(3)全局上下文只有唯一的一个,它在浏览器关闭时出栈;
(4)函数的执行上下文的个数没有限制
(5)每次某个函数被调用,就会有个新的执行上下文为其创建,即使是调用的自身函数,也是如此。

为了巩固一下执行上下文的理解,分析一个简单的闭包例子。

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

因为f1中的函数f2在f1的可执行代码中,并没有被调用执行,因此执行f1时,f2不会创建新的上下文,而直到result执行时,才创建了一个新的。具体过程如下:
avatar

原文出处:https://www.jianshu.com/p/a6d37c77e8db


发表评论

分类目录

2019年十二月
« 11月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

近期评论