是否曾经感觉您的代码有自己的想法——变得越来越混乱并且拒绝保持井井有条？别担心，我们都经历过。即使对于经验丰富的向导来说，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 等钩子管理状态 - 这一切都归功于闭包的魔力。
闭包可以存储状态，这使得它们非常适合缓存昂贵操作的结果。让我们一步步探索这个并增强我们的咒语。
我们的第一个咒语简单而强大：记忆守护者。如果再次请求相同的输入，它会立即返回缓存的结果。
// 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!) ✨
然而，有些咒语太过强大，无法永远持续。让我们通过忘记旧记忆的能力来增强我们的缓存。我们将创建一个 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
有时，咒语需要时间——比如等待遥远的神谕（或 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);
在这里探索完整的咒语。
我们的缓存咒语很强大，但这只是开始。您认为您可以升级代码吗？考虑添加错误处理、实现神奇的内存清理或创建更复杂的缓存策略。真正的编码艺术在于实验、突破界限和重新想象可能性！ ??
闭包非常强大，但即使是最好的咒语也伴随着风险。让我们揭示一些常见的陷阱及其解决方案，以帮助您自信地使用闭包。
编码面试中经常出现的一个经典 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
闭包维护对其外部作用域的引用，这意味着变量可能会比预期停留更长时间，从而导致内存泄漏。
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;
});
}
// ...
当共享状态发生变化时，闭包可能会导致意外行为。看似简单的参考可能会导致意想不到的副作用。
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);
}
掌握这些技术将帮助您自信地运用闭包的魔力。真正的掌握在于理解，而不是回避。 ✨
闭包最初可能看起来很复杂，但它们释放了编写更优雅、更高效的代码的潜力。通过将简单的函数转变为持久的、有状态的实体，闭包可以优雅地跨时间和空间共享秘密。这一强大的功能将 JavaScript 从简单的脚本语言提升为解决复杂问题的强大而灵活的工具。
你的旅程并没有在这里结束；更深入地了解异步模式、函数式编程和 JavaScript 引擎的内部工作原理。每一步都揭示了这种迷人语言的更多层次，激发了新的想法和解决方案。
毕竟，真正的掌握来自好奇心和探索。愿你的代码永远优雅、高效，而且有点神奇。 ？
以上是揭秘闭包：探索 JavaScript 的隐藏领域的详细内容。更多信息请关注PHP中文网其他相关文章！
