JS中的上下文 - 技术栈

一.执行上下文的概念：

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

二.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上下文中的作用域链：

javascript 复制代码

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

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

javascript 复制代码

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()中则可以访问另外两个上下文中的变量，因为它们都输父上下文。

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