理解Js执行上下文

算是难了

已于 2024-09-29 23:13:24 修改

阅读量702

点赞数 11

文章标签： javascript 前端

于 2024-09-29 22:57:19 首次发布

本文链接：https://blog.csdn.net/2301_76662406/article/details/142645026

版权

执行上下文

执行上下文（Context）又称上下文,在 JavaScript 中是一个重要的概念，它决定了变量和函数的可访问性及其行为。每个上下文都有一个关联的变量对象（Variable Object），所有在该上下文中定义的变量和函数都存储在这个对象上。虽然无法通过代码直接访问变量对象，但它在后台处理数据时是必不可少的。

全局上下文

全局上下文是最外层的上下文，表示全局作用域中的所有内容。在浏览器中，这个上下文由 window 对象表示。所有通过 var 定义的全局变量和函数都会成为 window 对象的属性和方法。使用 let 和 const 声明的顶级变量不会定义在全局上下文中，但在作用域链解析上效果是一样的。

全局上下文在其所有代码执行完毕后会被销毁，通常在应用程序退出时（例如关闭网页或退出浏览器）。

函数上下文

每个函数调用都有自己的上下文。当代码执行流进入函数时，函数的上下文被推入上下文栈。在函数执行完后，上下文栈将弹出该函数的上下文，控制权返回到之前的执行上下文。ECMAScript 程序的执行流正是通过这个上下文栈进行控制的。

一. 执行上下文的组成与功能

执行上下文是代码执行时的环境，包含以下信息：

变量对象：存储当前上下文中定义的所有变量和函数。
活动对象：函数上下文中的特定变量对象，包括参数和局部变量。
作用域链：用于查找变量的路径，确保在访问变量时遵循正确的顺序。

二. 变量对象与活动对象

1.变量对象

全局上下文的变量对象是全局对象（如 window）。
函数上下文的变量对象在函数被调用时创建，初始时仅包含一个特殊的 arguments 对象。

2.活动对象

活动对象（Activation Object）是一个抽象概念，用于表示在函数调用时其内部的变量和参数。虽然活动对象本身不是一个具体的对象，但它描述了函数执行时的环境和上下文。

活动对象是函数执行上下文中的变量对象的一个特定实例。当函数被调用时，会创建一个新的执行上下文，并且这个上下文中的变量对象被称为活动对象。活动对象除了包含arguments对象外，还会包含函数内部声明的所有局部变量、函数声明（注意，函数声明会提升，即它们会被添加到活动对象的顶部，即使它们在代码中的位置较低）和函数参数（如果参数名与arguments对象中的名称相同，则参数会覆盖arguments对象中的同名属性）。

(1). 活动对象的内容

在函数被调用时，活动对象会被创建，包含以下内容：

局部变量：在函数内部定义的变量。
参数：传递给函数的参数。
arguments 对象：包含所有传递给函数的参数的对象。
函数声明：在函数内部定义的其他函数。

(2).执行顺序

在函数调用时，活动对象的内容会按照以下顺序被处理：

参数处理：当函数被调用时，传入的参数会被添加到活动对象中。
局部变量声明：在函数内部定义的变量会被初始化并存储在活动对象中。
函数声明：如果在函数内部有其他函数声明，这些函数会被提升到活动对象的顶部。

3.理解活动对象的抽象概念

抽象性：活动对象是一个概念，用于描述函数执行时的环境，而不是一个具体的 JavaScript 对象。它帮助我们理解函数的作用域、变量生命周期和查找机制。
作用域管理：活动对象通过存储局部变量和参数，确保每次函数调用都有一个独立的作用域。这使得不同的函数调用不会相互干扰。

4. 理解活动对象的独立作用域

function outerFunction() {
    let outerVar = '我在外部！';

    function innerFunction(innerVar) {
        console.log(outerVar); // 访问外部函数的变量
        console.log(innerVar);  // 访问内部函数的参数
    }

    innerFunction('我在内部！');
}

outerFunction();

(1.)独立作用域：

当调用 outerFunction 时，创建了一个新的活动对象，包含 outerVar。
当调用 innerFunction 时，另一个独立的活动对象被创建，包含 innerVar。

(2).变量查找：

innerFunction 中的 console.log(outerVar) 查找首先在 innerFunction 的活动对象中查找变量，如果未找到，则沿着作用域链向上查找，找到 outerFunction 的活动对象，因此可以访问 outerVar。
console.log(innerVar) 直接在 innerFunction 的活动对象中找到 innerVar。