寻找 JavaScript 宝藏：探索闭包和作用域链的奇妙之旅（上）

云间比翼多

已于 2023-10-26 14:31:23 修改

阅读量17

点赞数 1

文章标签： javascript 开发语言前端

于 2023-10-25 13:28:30 首次发布

本文链接：https://blog.csdn.net/qq_60555345/article/details/134032590

版权

原文跳转：寻找 JavaScript 宝藏：探索闭包和作用域链的奇妙之旅（上）

引子：

在编程的大海中，有一个古老的传说：在 JavaScript 的世界中，隐藏着宝藏，只有那些了解闭包和作用域链的人才能找到。你是否准备好踏上这场奇妙之旅，解锁宝藏的秘密呢？

第一章：解锁宝藏的秘密

探索闭包和作用域链：

想象一下，你站在 JavaScript 的大门前，面对着这个奇妙的世界。在这个世界中，每个函数都拥有自己的领地，被称为"作用域"，就像是一个小王国。在这个小王国中，函数可以创建变量，定义函数，做各种事情。

然而，这些小王国之间并不是孤立的。它们之间有一种神奇的联系，这就是作用域链。作用域链就像是一条纽带，将这些小王国连接在一起。这意味着函数可以访问自己的作用域中的变量，也可以访问它们的父级作用域，以及全局作用域。

// 定义外部函数
function outerFunction() {
  // 创建并初始化外部函数的变量
  var outerVar = "外部函数变量";

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

  // 返回内部函数
  return innerFunction;
}

// 调用外部函数，它返回内部函数
var innerFunc = outerFunction();

// 调用内部函数，内部函数输出外部函数的变量值
innerFunc();

这段代码的执行流程可以总结为以下几步：

outerFunction 被调用，它包含两部分：
- 创建并初始化了名为 outerVar 的局部变量，赋值为 “外部函数变量”。
- 定义了内部函数 innerFunction。
outerFunction 返回内部函数 innerFunction，但并不立即执行它。此时，innerFunc 包含了对 innerFunction 的引用。
当执行 innerFunc() 时，实际上执行了内部函数 innerFunction。这时内部函数输出了外部函数中的 outerVar 变量，结果是 “外部函数变量”。

在这个示例中，createCounter 函数返回了一个内部函数。这个内部函数形成了一个闭包，可以访问外部函数中的 count 变量。即使 createCounter 函数执行完毕，闭包仍然保留了对 count 变量的引用，因此它可以继续增加计数。这就是闭包和作用域链之间的关系，内部函数通过闭包连接到外部函数的作用域，使得外部函数的变量保持活跃。

闭包的秘密：

闭包是一个令人着迷的现象。它发生在函数内部定义了另一个函数的时候。这个内部函数被称为闭包，它有一种特殊的能力：它可以访问外部函数的变量，即使外部函数已经执行完毕。

闭包就像是函数的记忆，它记住了它所在的作用域。这个特性使闭包非常强大。它可以用来封装数据，创建私有变量，实现模块化，以及解决许多其他编程问题。

闭包和作用域链的关系：现在，你可能会想知道闭包和作用域链之间有什么关系。实际上，闭包是作用域链的产物。它形成了一个封闭的环境，允许内部函数访问外部函数的变量，同时保留了对外部作用域的引用。

在接下来的章节中，我们将深入探讨闭包和作用域链的工作原理，以及如何使用它们来编写更强大的 JavaScript 代码。准备好迎接更多神奇的发现吧！

第二章：闭包的魔法

探索闭包的神奇：

你已经了解了闭包的基本概念，现在我们将深入研究闭包的神奇之处。闭包是 JavaScript 中的魔法工具，它有许多令人惊叹的应用。让我们一起探索这些魔法吧。

保留外部函数的变量：

闭包的一个神奇之处是它们可以保留外部函数的变量。这意味着，即使外部函数已经执行完毕，闭包仍然可以访问和修改这些变量。这为我们提供了一种方式来创建具有持久性状态的函数。

示例1：创建计数器：

function createCounter() {
  var count = 0; // 外部函数的变量

  return function() {
    count++;
    console.log("当前计数：" + count);
  };
}

var increment = createCounter();

increment(); // 输出 "当前计数：1"
increment(); // 输出 "当前计数：2"

在这个示例中，createCounter 函数返回的闭包可以持续地增加计数，因为它保留了对外部函数中的 count 变量的引用。这是闭包的魔法之一。

示例2：封装数据：

function createPerson(name) {
  var privateName = name;

  return {
    getName: function() {
      return privateName;
    },
    setName: function(newName) {
      privateName = newName;
    }
  };
}

var person = createPerson("Alice");
console.log(person.getName()); // 输出 "Alice"
person.setName("Bob");
console.log(person.getName()); // 输出 "Bob"