JS中的上下文

发布于:2024-07-03 ⋅ 阅读:(13) ⋅ 点赞:(0)

  一.执行上下文的概念:

     执行上下文简称上下文。变量或者函数的上下文决定了它们可以访问哪些数据,以及它们的行为。每一个上下文都具有一个关联的变量对象,而这个上下文中定义的所有变量和函数都存在于这个对象上。

   二.JS中上下文的执行机制:

        全局上下文是最外层的上下文。根据ECMAScript实现的宿主环境,表示全局上下文的对象可能不一样。在浏览器中,window对象一般就是我们所说的全局上下文,因此所有通过var定义的全局变量都会绑定在window对象上,但是使用let和const定义的变量则不会定义在全局上下文中。执行上下文是JS代码在执行时的环境抽象,它包括了变量对象,作用域链,this指向等信息。

        每个函数流都有自己的上下文。当代码执行流进入函数时,函数的上下文被推到一个上下文栈上。在函数执行完毕之后,上下文栈就会弹出该函数的上下文,把控制权交还给之前的执行上下文。JS中程序的执行流就是通过这个上下文栈进行控制的。

        上下文在其所有代码都执行完毕后会被销毁,包括定义在其上面的所有变量和函数,而全局上下文则会在应用程序退出前才会被销毁,比如关闭网页或者是退出浏览器。

    三.JS中上下文的生命周期:

        执行上下文的生命周期包括两个阶段:创建阶段和执行阶段。

        3.1创建阶段:

             首先会根据上下文的类型来创建一个空的变量对象,然后建立作用域链,作用域链是一个指向父级作用域的链表,用于查找变量的值;在全局上下文中,this的指向为全局对象。在函数内部,this的指向取决于函数的调用方式;然后将函数的参数,函数的声明和变量添加到变量对象中。

        3.2执行阶段:

             在执行阶段会按照如下步骤来进行:按照代码的顺序执行,对变量进行赋值等操作;然后通过作用域来查找变量的值,最后在函数上下文中执行函数体内的代码。

四.上下文的分类:

     4.1全局上下文:

           全局上下文是默认的,最外层的上下文。它存在于整个页面生命周期,负责全局变量的声明和函数的执行。

      4.2函数执行上下文:

           每当调用一个函数时,都会创建一个新的函数执行上下文。函数执行上下文在函数执行结束后被销毁。

       4.3Eval执行上下文:

            eval函数执行的代码会在一个新的执行上下文中运行,被称为eval执行上下文。

五.JS上下文中的作用域链:

 var color="blue";
        function changeColor(){
            if(color==="blue"){
                color="red";
            }
            else{
                color="blue"
            }
        }
        changeColor();

就这个例子而言,函数changeColor()的作用域链包括两个对象,一个是它自己的变量对象,一个就是全局上下文的变量对象。在这个函数内部之所以能够访问变量color,就是因为可以在作用域中找到这个变量。

var color="blue";
        function changeColor(){
            let antherColor="red";
            function swapColor(){
                let tempColor=antherColor;
                anthorColor=color;
                color=tempColor;
                //可以访问到color,antherColor和tempColor
            }
            //可以访问到color,antherColor,访问不到tempColor
            swapColor();
        }
        changeColor()//只能访问到color;

在面的例子中,设计三个上下文,全局上下文,changeColor()的局部上下文和swapColor()的局部上下文。在全局上下文中只有一个变量color和一个函数changeColor()。changeColor()的局部上下文中包括一个变量antherColor和一个函数swapColor() .但是在changeColor()中可以访问到全局上下文中的变量color。swapColor()的局部上下文中有一个变量tempColor,只能在这个上下文中访问到。在全局上下文和changeColor()的局部上下文中都无法访问到变量tempColor。但是在swapColor()中则可以访问另外两个上下文中的变量,因为它们都输父上下文。

        所以,内部上下文可以通过作用域链访问外部上下文中的一切,但是外部上下文无法访问内部上下文中的任何东西。因为在上下文中的连接是线性的,有序的。每个上下文都可以到上一级山下文中去搜索变量和函数,但是任何上下文都不能去下一级的上下文中去搜索。内部上下文首先从自己的变量对象开始搜索变量和函数,搜索不到就去搜索上一级变量对象。