10分钟带你深入理解JavaScript的执行上下文和闭包机制

不念不忘少年蓝@ 2024-04-25 20:13 66阅读 0赞

![88faa69139714f949e0d187a402a0f2c.jpeg][]

**? 岸边的**风：[个人主页][Link 1]

**? 个人专栏** :[《 VUE 》][VUE] [《 javaScript 》][javaScript]

**⛺️ 生活的理想，就是为了理想的生活 !**

![在这里插入图片描述][7a8de4d12e20434eb29590366872b046.gif_pic_center]

**目录**

? 前言

? 一. JavaScript中的闭包

? 二. 执行上下文与闭包

? 三. 闭包的应用场景

? 1. 数据封装和私有性

? 2. 模块化编程

? 3. 回调函数和事件处理

? 4. 缓存和记忆化

? 四. 闭包的优缺点

? 1. 内存消耗

? 2. 内存泄漏

? 3. 性能影响

? 写在最后

--------------------

![46df2ba57f4a4ac2aa4e86435ec70918.png][]

##  ? 前言 ##

> JavaScript中的闭包源于计算机科学中的一种理论概念，称为“λ演算”（Lambda Calculus）。λ演算是计算机科学的基础之一，1930年由Alonzo Church提出，它是一种用于描述计算过程的数学抽象模型，也是函数式编程语言的基础。
> 
> 在JavaScript中，闭包是函数和声明该函数的词法环境的组合。这个环境包含了闭包创建时所能访问的所有局部变量。
> 
> 理解闭包，需要理解JavaScript的特性和工作原理。JavaScript的函数在创建时，就确定了其操作的上下文环境，即词法作用域。这是因为JavaScript采用的是静态作用域，也叫词法作用域，函数的作用域在函数定义的时候就决定了。

**例如：**

function outer() {
        var name = 'JavaScript';
        function inner() {
            console.log(name);
        }
        return inner;
    }
    
    var innerFunc = outer();
    innerFunc(); // 输出 'JavaScript'

> 在这个例子中，`outer`函数返回了`inner`函数。`inner`函数访问了`outer`函数的局部变量`name`，因此形成了一个闭包。即使`outer`函数执行完毕，`name`变量的引用仍然被保留，因此`innerFunc`在执行时仍然能够输出 'JavaScript'。
> 
> 闭包的概念虽然来自计算机科学的深层理论，但在日常的JavaScript编程中，它是一个非常实用且常见的特性，被广泛用于如数据隐藏和封装、模块化编程、回调函数和计时器等许多场景中。

### ? 一. JavaScript中的闭包 ###

> 在JavaScript中，闭包是一个强大而复杂的特性，理解和利用好闭包对于编写高效且安全的代码至关重要。下面就让我们深入地了解一下JavaScript的闭包。
> 
> 闭包是指那些能够访问自由变量的函数。什么是自由变量呢？如果一个变量在函数内部被引用，但它既不是函数的参数也不是函数的局部变量，那么就称之为“自由变量”。
> 
> 例如，我们有一个外部函数和一个内部函数：

function outerFunction(outerVariable) {
      function innerFunction() {
        console.log(outerVariable);
      }
      return innerFunction;
    }
    
    var inner = outerFunction('Hello Closure');
    inner(); // 输出 'Hello Closure'

> 在这个例子中，`outerFunction`是一个外部函数，接受一个参数`outerVariable`。它包含一个内部函数`innerFunction`，这个内部函数没有自己的参数或局部变量，但却引用了外部函数的变量`outerVariable`。所以，我们说`innerFunction`是一个闭包，而`outerVariable`就是它的自由变量。
> 
> 需要注意的是，由于JavaScript的垃圾回收机制，如果一个变量离开了它的作用域，那么这个变量就会被回收。但是，由于`innerFunction`是一个闭包，它引用了`outerVariable`，所以即使`outerFunction`执行完毕，`outerVariable`离开了它的作用域，但仍然不会被垃圾回收机制回收。

> 再者，每次调用外部函数，都会为内部的闭包创建一个新的作用域。例如：

var inner1 = outerFunction('Hello Closure 1');
    var inner2 = outerFunction('Hello Closure 2');
    inner1(); // 输出 'Hello Closure 1'
    inner2(); // 输出 'Hello Closure 2'

> 这里，`inner1`和`inner2`是两个不同的闭包。他们分别有自己的作用域，储存了不同的`outerVariable`。

### ? 二. 执行上下文与闭包 ###

> 在JavaScript中，执行上下文（execution context）是一个关键概念，与闭包（closure）密切相关。理解执行上下文如何与闭包交互可以帮助我们深入理解闭包的工作原理和行为。
> 
> 执行上下文是JavaScript代码执行时的环境。它包含了变量、函数声明、作用域链等信息，用于管理和跟踪代码的执行过程。当一个函数被调用时，就会创建一个新的执行上下文。每个执行上下文都有自己的词法环境（Lexical Environment），用于存储变量和函数的声明。
> 
> 在理解闭包之前，让我们先了解一下执行上下文的创建和销毁过程。当函数被调用时，会创建一个新的执行上下文，并将其推入执行上下文栈（execution context stack）中。当函数执行完毕后，其执行上下文会从栈中弹出并销毁。
> 
> 现在，让我们通过一个例子来更具体地了解执行上下文和闭包之间的关系：

function outerFunction(outerVariable) {
      function innerFunction(innerVariable) {
        console.log('outerVariable:', outerVariable);
        console.log('innerVariable:', innerVariable);
      }
      return innerFunction;
    }
    
    var newFunction = outerFunction('outside');
    newFunction('inside'); // 输出: outerVariable: outside innerVariable: inside

> 在这个例子中，当调用`outerFunction`时，会创建一个新的执行上下文，其中包含了`outerVariable`参数和`innerFunction`函数声明。然后，`outerFunction`返回了`innerFunction`，并将其赋值给变量`newFunction`。
> 
> 现在让我们来看看闭包是如何形成的。当`innerFunction`被返回时，它会携带其词法环境（包含`outerVariable`）一起返回。这意味着`innerFunction`保持对**`outerVariable`**的引用，即使`outerFunction`执行完毕并且其执行上下文已经销毁。
> 
> 这就是闭包的力量所在。它允许内部函数（`innerFunction`）访问其词法环境中的变量（`outerVariable`），即使这些变量在其创建时的执行上下文已经不存在。
> 
> 在这个例子中，`newFunction`就是一个闭包。它引用了外部函数`outerFunction`的词法环境，其中包含了`outerVariable`变量。因此，当我们调用`newFunction`时，它可以访问并打印出`outerVariable`和`innerVariable`的值。
> 
> 执行上下文和闭包的关系是密不可分的。闭包是由执行上下文中的变量引用形成的，而这些变量保留在闭包的作用域中。这使得闭包能够在函数执行完成后继续访问这些变量，实现了JavaScript中非常重要的特性。
> 
> 理解执行上下文和闭包的交互对于编写复杂的JavaScript代码非常重要。它有助于我们更好地理解作用域、变量的生命周期以及如何正确使用闭包来解决问题。同时，它也帮助我们避免一些潜在的问题，如内存泄漏和不必要的资源消耗。

### ? 三. 闭包的应用场景 ###

> 闭包在JavaScript中有广泛的应用场景，它是一种强大的编程工具，可以解决许多常见的问题。下面我们来介绍一些常见的闭包应用场景。

#### ? 1. 数据封装和私有性 ####

> 闭包可以用于创建私有变量，将变量隐藏在函数作用域内部，从而实现数据的封装和私有性。通过闭包，我们可以控制变量的访问权限，只暴露需要暴露的接口。这种封装机制可以防止外部代码直接访问和修改内部数据，增加代码的安全性。

> 在这个例子中，`createCounter`函数返回一个对象，该对象包含了三个闭包函数，分别用于增加计数、减少计数和获取计数值。通过闭包，我们可以将`count`变量隐藏在函数内部，并通过闭包函数来操作和访问这个变量。

#### ? 2. 模块化编程 ####

> 闭包可以用于实现模块化编程，将相关的变量和函数组织在一个闭包内部，形成一个模块。这样可以避免全局命名冲突，提供命名空间，并且允许模块内部的函数相互调用和共享数据。

> 在这个例子中，我们使用了立即调用函数表达式（IIFE）来创建一个闭包，形成一个独立的模块。模块内部的变量和函数对外部是不可见的，只有通过公共接口才能访问。

#### ? 3. 回调函数和事件处理 ####

> 闭包常常用于处理回调函数和事件处理，特别是在异步编程中。由于闭包的特性，它可以捕获外部函数的上下文，并在内部函数被调用时保留这个上下文，从而实现对异步操作的响应。

> 在这个例子中，`fetchData`函数通过闭包捕获了`processData`函数作为回调函数。当异步操作完成时，它会调用回调函数并传递数据给它。闭包保持了回调函数的上下文，使得回调函数可以访问外部的`processData`函数。

#### ? 4. 缓存和记忆化 ####

> 闭包还可以用于实现缓存和记忆化功能。通过闭包，我们可以在函数内部维护一个缓存，避免重复计算相同的结果，提高函数执行的性能。

> 在这个例子中，`memoizedFunction`返回一个闭包函数，用于记忆化计算结果。闭包内部维护了一个缓存对象`cache`，当输入相同的参数时，直接从缓存中读取结果，避免重复计算。
> 
> 闭包在JavaScript中有许多其他的应用场景，如实现延迟执行、函数柯里化、实现迭代器等。了解闭包的应用场景可以帮助我们写出更加优雅、高效的代码，并利用闭包的强大能力解决问题。

### ? 四. 闭包的优缺点 ###

> 当谈到闭包的缺点时，主要涉及内存消耗、内存泄漏和性能影响。下面是一些代码示例，帮助我们理解这些缺点。

#### ? 1. **内存消耗** ####

> 闭包会导致内存占用增加，因为它们会保留对外部变量的引用，即使外部函数执行完毕。这可能会导致内存占用过高。

function createHugeArray() {
      var arr = new Array(1000000).fill('Huge Data');
      return function() {
        console.log(arr.length);
      };
    }
    
    var bigDataFunc = createHugeArray();
    bigDataFunc(); // 输出: 1000000

> 在这个例子中，`createHugeArray`函数返回一个闭包函数，它引用了一个巨大的数组`arr`。即使`createHugeArray`执行完毕，`arr`仍然被闭包引用，无法被垃圾回收机制回收，从而导致内存占用增加。

#### ? 2.  **内存泄漏** ####

> 由于闭包会持有对外部变量的引用，如果不正确地处理闭包的使用，可能会导致内存泄漏。如果一个闭包长时间存在，但不再需要，它会一直持有对外部变量的引用，使这些变量无法被垃圾回收。

function leakMemory() {
      var data = 'Sensitive Data';
      var timer = setInterval(function() {
        console.log(data);
      }, 1000);
    }
    
    leakMemory();

> 在这个例子中，`leakMemory`函数创建了一个闭包，它引用了一个定时器内部的函数。即使`leakMemory`执行完毕，定时器仍然在持续执行，因此闭包会一直存在并引用`data`变量，导致`data`无法被垃圾回收。

#### ? 3.  **性能影响** ####

> 闭包可能对性能产生一定的影响，特别是在涉及大量变量或复杂词法环境的情况下。闭包的创建和执行可能消耗更多的时间和资源。

> 在这个例子中，`calculate`函数返回一个闭包函数，它引用了一个在循环中计算的结果。由于闭包保留了这个结果，闭包的执行可能会耗费更多的时间和资源。

**为了减少闭包的缺点，我们可以采取以下措施：**

>  *  优化内存使用：在闭包中避免持有大量数据或不必要的引用。确保只保留必要的变量和引用。
>  *  及时清理闭包：在不需要使用闭包时，手动解除对闭包的引用，以便垃圾回收机制可以回收闭包相关的资源。
>  *  避免滥用闭包：只在必要的情况下使用闭包，避免在不必要的场景中使用闭包。
>  *  优化性能：在闭包的创建和使用过程中，尽量避免不必要的计算或资源消耗，以提高性能。

> 通过**合理使用和处理闭包**，我们可以最大限度地减少其缺点，同时享受闭包在JavaScript中带来的强大功能。

##  ? 写在最后 ##

> 执行上下文由三个重要组成部分构成：
> 
> 1.  变量对象（Variable Object）：存储变量、函数声明和函数参数。
> 2.  作用域链（Scope Chain）：决定了变量和函数的访问权限，通过一系列嵌套的作用域构成。
> 3.  this 值：指向当前执行上下文所属的对象。
> 
> 闭包是指能够访问自己定义的词法作用域以及父级作用域中变量的函数。通过闭包，函数可以记住并访问其在定义时的词法环境。
> 
> 闭包的特点：
> 
> 1.  闭包可以访问外部函数的变量和参数，即使外部函数已经执行完毕。
> 2.  外部函数的变量和参数在闭包中被保留，并且可以在闭包中被修改。
> 3.  闭包可以通过返回函数来创建，在外部函数之外对其进行引用和调用。
> 
> 闭包在JavaScript中有多种应用场景，例如创建私有变量、封装模块、保存状态等。但需要注意闭包可能导致内存泄漏问题，因此需要合理使用和释放闭包。
> 
> 深入理解JavaScript的执行上下文和闭包机制对于理解函数作用域、变量生命周期以及如何有效地使用闭包非常重要。熟练掌握这些概念可以提高代码质量和开发效率。

![72014baa5190438585719a180b0f82c4.jpeg][]

[88faa69139714f949e0d187a402a0f2c.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/5870237f89434bfebc96c05a4fe72cff.jpeg
[Link 1]: https://blog.csdn.net/qq_48652579?type=blog
[VUE]: https://blog.csdn.net/qq_48652579/category_12294321.html
[javaScript]: https://blog.csdn.net/qq_48652579/category_12275821.html
[7a8de4d12e20434eb29590366872b046.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/3780a4c0a0c340edaf8560a6272d1c7c.gif
[46df2ba57f4a4ac2aa4e86435ec70918.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/239b47a2c6cb4b62a4ed8194010f94cc.png
[72014baa5190438585719a180b0f82c4.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/c1bcbd7401e645098c5a2569d9d2290b.jpeg