揭秘闭包：探索 JavaScript 的隐藏领域

目录

• 逃离编码混乱
• 闭包到底是什么？
• 崩溃：关闭揭幕
• 实用法术：带有闭包的缓存之旅
• 常见陷阱以及如何避免它们
• 旅程继续

---

逃离编码混乱？‍♂️

是否曾经感觉您的代码有自己的想法——变得越来越混乱并且拒绝保持井井有条？别担心，我们都经历过。即使对于经验丰富的向导来说，JavaScript 也可能很棘手。但如果我告诉你有一个秘密武器可以控制一切呢？输入闭包。

将闭包视为函数携带的神奇背包，用于存储稍后可能需要的变量和内存。这些小小的编程魔法可以让您的代码保持井井有条，管理状态而不混乱，并为动态、灵活的模式打开大门。

通过掌握闭包，您将在代码中解锁新的功能和优雅水平。所以，拿起你的编码棒（或一杯浓咖啡☕），让我们一起冒险进入这些隐藏的领域。 ?✨

---

到底什么是闭包？ ？

闭包只是一个函数，它会记住原始环境中的变量——即使在该环境不再存在之后也是如此。 JavaScript 不会丢弃这些变量，而是将它们隐藏起来，以便在需要时调用。

const createCounter = () => {
    let count = 0; // Private variable in the closure's secret realm

    return () => {
        count++; // Whispers an increment to the hidden counter
        return count; // Reveal the mystical number
    };
}

// Summoning our magical counter
const counter = createCounter();

console.log(counter()); // Outputs: 1
console.log(counter()); // Outputs: 2
console.log(counter()); // Outputs: 3
console.log(counter.count);  // Outputs: undefined (`count` is hidden!) ?️‍♀️

即使 createCounter 已完成运行，内部函数仍保留对 count 的访问。这种“内存”是闭包的本质——保证数据安全并支持强大、灵活的代码。 ?✨

---

崩溃：关闭揭晓？

虽然闭包可能感觉很神奇，但它们只是 JavaScript 处理 范围 和 内存 的结果。每个函数都带有一个指向其词法环境的链接——定义它的上下文。

？ 词法环境是变量绑定的结构化记录，定义在该范围内可访问的内容。它就像一张地图，显示哪些变量和函数位于给定的块或函数内。

闭包是动态讲故事的人吗？

闭包不仅仅锁定一个值；他们跟踪随着时间的推移发生的变化。如果外部作用域的变量更新，闭包就会看到新值。

const createCounter = () => {
    let count = 0; // Private variable in the closure's secret realm

    return () => {
        count++; // Whispers an increment to the hidden counter
        return count; // Reveal the mystical number
    };
}

// Summoning our magical counter
const counter = createCounter();

console.log(counter()); // Outputs: 1
console.log(counter()); // Outputs: 2
console.log(counter()); // Outputs: 3
console.log(counter.count);  // Outputs: undefined (`count` is hidden!) ?️‍♀️

为什么闭包是神奇的必需品？ ？

闭包通过创建具有受控访问权限的私有变量来实现封装，跨多个调用管理状态而不依赖全局变量，并支持动态行为如工厂、回调，和挂钩。

像 React 这样的框架利用这些能力，让功能组件保持无状态，同时使用 useState 等钩子管理状态 - 这一切都归功于闭包的魔力。

---

实用法术：带闭包的缓存之旅？‍♂️

闭包可以存储状态，这使得它们非常适合缓存昂贵操作的结果。让我们一步步探索这个并增强我们的咒语。

第 1 步：?️ 内存守护者 – 基本缓存

我们的第一个咒语简单而强大：记忆守护者。如果再次请求相同的输入，它会立即返回缓存的结果。

// A variable in the global magical realm
let multiplier = 2;

const createMultiplier = () => {
  // The inner function 'captures' the essence of the outer realm
  return (value: number): number => value * multiplier;
}; 


// Our magical transformation function
const double = createMultiplier();

console.log(double(5)); // Outputs: 10
multiplier = 3;
console.log(double(5)); // Outputs: 15 (The magic adapts!) ✨

第 2 步：⏳ 褪色咒语 – 过期缓存

然而，有些咒语太过强大，无法永远持续。让我们通过忘记旧记忆的能力来增强我们的缓存。我们将创建一个 CacheEntry 来不仅存储值，还存储它们神奇的生命周期。

（请注意我们如何在之前的想法的基础上进行构建 - 闭包可以轻松地增加复杂性而不丢失轨道。）

function withCache(fn: (...args: any[]) => any) {
  const cache: Record<string, any> = {};

  return (...args: any[]) => {
    const key = JSON.stringify(args);

    // Have we encountered these arguments before?
    if (key in cache) return cache[key]; // Recall of past magic! ?

    // First encounter? Let's forge a new memory
    const result = fn(...args);
    cache[key] = result;

    return result;
  };
}

// Example usage
const expensiveCalculation = (x: number, y: number) => {
  console.log('Performing complex calculation');
  return x * y;
};

// Summoning our magical cached calculation
const cachedCalculation = withCache(expensiveCalculation);

console.log(cachedCalculation(4, 5)); // Calculates and stores the spell
console.log(cachedCalculation(4, 5)); // Uses cached spell instantly

步骤 3： ?异步魔法 – Promise 处理

有时，咒语需要时间——比如等待遥远的神谕（或 API）响应。我们的咒语也可以解决这个问题。它将等待 Promise，存储解析的值，并在将来返回它——不会重复获取。

type CacheEntry<T> = { value: T; expiry: number; };

function withCache<T extends (...args: any[]) => any>(
  fn: T,
  expirationMs: number = 5 * 60 * 1000, // Default 5 minutes
) {
  const cache = new Map<string, CacheEntry<ReturnType<T>>>();

  return (...args: Parameters<T>): ReturnType<T> => {
    const key = JSON.stringify(args);
    const now = Date.now(); // Current magical moment
    const cached = cache.get(key);

    // Is our magical memory still vibrant?
    if (cached && now < cached.expiry) return cached.value;

    // The memory has faded; it’s time to create new ones!
    const result = fn(...args);
    cache.set(key, { value: result, expiry: now + expirationMs });

    return result;
  };
}

// ...

const timeLimitedCalc = 
  withCache(expensiveCalculation, 3000); // 3-second cache

console.log(timeLimitedCalc(4, 5)); // Stores result with expiration
console.log(timeLimitedCalc(4, 5)); // Returns cached value before expiry

setTimeout(() => {
  console.log(timeLimitedCalc(4, 5)); // Recalculates after expiration
}, 3000);

在这里探索完整的咒语。

巫师的挑战??‍♂️

我们的缓存咒语很强大，但这只是开始。您认为您可以升级代码吗？考虑添加错误处理、实现神奇的内存清理或创建更复杂的缓存策略。真正的编码艺术在于实验、突破界限和重新想象可能性！ ??

---

常见的陷阱以及如何避免它们？️

闭包非常强大，但即使是最好的咒语也伴随着风险。让我们揭示一些常见的陷阱及其解决方案，以帮助您自信地使用闭包。

陷阱#1：?️ 偷偷摸摸的循环陷阱

编码面试中经常出现的一个经典 JavaScript 陷阱涉及循环，具体来说，它们如何处理循环变量和闭包。

// ...

// The memory has faded; it’s time to create new ones!
const result = fn(...args);

if (result instanceof Promise) {
  return result.then((value) => {
    cache.set(key, { value, expiry: now + expirationMs });
    return value;
  });
}

// ...

上面的示例将数字 5 记录五次，因为 var 为所有闭包创建了一个共享变量。

解决方案 1：使用 let 来确保块作用域。
let 关键字为每次迭代创建一个新的块范围变量，因此闭包捕获正确的值。

const createCounter = () => {
    let count = 0; // Private variable in the closure's secret realm

    return () => {
        count++; // Whispers an increment to the hidden counter
        return count; // Reveal the mystical number
    };
}

// Summoning our magical counter
const counter = createCounter();

console.log(counter()); // Outputs: 1
console.log(counter()); // Outputs: 2
console.log(counter()); // Outputs: 3
console.log(counter.count);  // Outputs: undefined (`count` is hidden!) ?️‍♀️

解决方案 2：使用 IIFE（立即调用函数表达式）。
IIFE 为每次迭代创建一个新的作用域，确保循环内正确的变量处理。

// A variable in the global magical realm
let multiplier = 2;

const createMultiplier = () => {
  // The inner function 'captures' the essence of the outer realm
  return (value: number): number => value * multiplier;
}; 


// Our magical transformation function
const double = createMultiplier();

console.log(double(5)); // Outputs: 10
multiplier = 3;
console.log(double(5)); // Outputs: 15 (The magic adapts!) ✨

额外提示：？功能性技巧。
很少有巫师知道这个咒语，说实话，我很少（如果有的话）在编码面试中看到它被提及。您知道 setTimeout 可以直接向其回调传递附加参数吗？

function withCache(fn: (...args: any[]) => any) {
  const cache: Record<string, any> = {};

  return (...args: any[]) => {
    const key = JSON.stringify(args);

    // Have we encountered these arguments before?
    if (key in cache) return cache[key]; // Recall of past magic! ?

    // First encounter? Let's forge a new memory
    const result = fn(...args);
    cache[key] = result;

    return result;
  };
}

// Example usage
const expensiveCalculation = (x: number, y: number) => {
  console.log('Performing complex calculation');
  return x * y;
};

// Summoning our magical cached calculation
const cachedCalculation = withCache(expensiveCalculation);

console.log(cachedCalculation(4, 5)); // Calculates and stores the spell
console.log(cachedCalculation(4, 5)); // Uses cached spell instantly

陷阱#2：？内存泄漏——无声的威胁

闭包维护对其外部作用域的引用，这意味着变量可能会比预期停留更长时间，从而导致内存泄漏。

type CacheEntry<T> = { value: T; expiry: number; };

function withCache<T extends (...args: any[]) => any>(
  fn: T,
  expirationMs: number = 5 * 60 * 1000, // Default 5 minutes
) {
  const cache = new Map<string, CacheEntry<ReturnType<T>>>();

  return (...args: Parameters<T>): ReturnType<T> => {
    const key = JSON.stringify(args);
    const now = Date.now(); // Current magical moment
    const cached = cache.get(key);

    // Is our magical memory still vibrant?
    if (cached && now < cached.expiry) return cached.value;

    // The memory has faded; it’s time to create new ones!
    const result = fn(...args);
    cache.set(key, { value: result, expiry: now + expirationMs });

    return result;
  };
}

// ...

const timeLimitedCalc = 
  withCache(expensiveCalculation, 3000); // 3-second cache

console.log(timeLimitedCalc(4, 5)); // Stores result with expiration
console.log(timeLimitedCalc(4, 5)); // Returns cached value before expiry

setTimeout(() => {
  console.log(timeLimitedCalc(4, 5)); // Recalculates after expiration
}, 3000);

这里发生了什么？即使只需要一小部分，闭包也会保留整个数据变量，这可能会浪费大量资源。

解决方案是仔细管理闭包捕获的内容并显式释放不必要的引用。这可确保仅在需要时加载大型数据集，并通过清理方法主动释放。

// ...

// The memory has faded; it’s time to create new ones!
const result = fn(...args);

if (result instanceof Promise) {
  return result.then((value) => {
    cache.set(key, { value, expiry: now + expirationMs });
    return value;
  });
}

// ...

陷阱 #3：?️ 突变混乱

当共享状态发生变化时，闭包可能会导致意外行为。看似简单的参考可能会导致意想不到的副作用。

for (var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i); // Logs 5, five times ?
  }, i * 1000); 
}

这里发生了什么？ getUsers 方法公开了用户数组，破坏了封装并冒着外部修改带来意想不到的副作用的风险。

解决方案是返回内部状态的副本。这可以防止外部修改，保持数据完整性，并保护闭包的内部逻辑。

for (let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i); // Works as expected ?
  }, i * 1000);
}

掌握关闭的黄金法则？

1. 有意捕获：了解闭包捕获的内容以避免不必要的依赖关系和内存问题。
2. 明智地作用域变量：使用块作用域来防止共享引用错误并确保正确的变量捕获。
3. 拥抱不变性：支持不可变模式，返回副本而不是改变共享状态，以避免副作用。
4. 练习清理：释放不需要的引用以防止内存泄漏，尤其是对于大型或敏感数据。

掌握这些技术将帮助您自信地运用闭包的魔力。真正的掌握在于理解，而不是回避。 ✨

---

旅程仍在继续

闭包最初可能看起来很复杂，但它们释放了编写更优雅、更高效的代码的潜力。通过将简单的函数转变为持久的、有状态的实体，闭包可以优雅地跨时间和空间共享秘密。这一强大的功能将 JavaScript 从简单的脚本语言提升为解决复杂问题的强大而灵活的工具。

你的旅程并没有在这里结束；更深入地了解异步模式、函数式编程和 JavaScript 引擎的内部工作原理。每一步都揭示了这种迷人语言的更多层次，激发了新的想法和解决方案。

毕竟，真正的掌握来自好奇心和探索。愿你的代码永远优雅、高效，而且有点神奇。 ？

以上是揭秘闭包：探索 JavaScript 的隐藏领域的详细内容。更多信息请关注PHP中文网其他相关文章！