js进阶——作用域闭包
1. 作用域与闭包的基础概念
1.1 作用域 (Scope)
在 JavaScript 中，作用域定义了变量、函数的可访问性。根据变量声明的位置不同，作用域有三种主要类型：
- 全局作用域：在代码的任何地方都可以访问。
- 函数作用域：只在声明的函数内部访问。
- 块作用域：由
{}包围的代码块内部可访问，使用let和const声明的变量具备块作用域。
1.2 闭包 (Closure)
闭包是指一个函数与其外部（函数定义时）环境的结合，使得即使函数在外部作用域被调用，它依然能够访问其创建时的变量。这是 JavaScript 中的一个关键特性，用于实现封装、私有变量、回调函数等。
简单地说，闭包就是内部函数可以“记住”它的外部函数的变量，即使外部函数已经执行完毕。
2. 作用域链与闭包的关系
每个 JavaScript 函数在执行时都会创建一个作用域链（scope chain）。作用域链用来确保函数执行时能访问所有变量。这个作用域链由多个作用域逐层嵌套形成，最里层的作用域是函数自己的局部作用域，往外是外部函数的作用域，直到全局作用域。
闭包的关键在于，函数的作用域链不会因为外部函数执行完毕而丢失。当内部函数被执行时，它依然能够通过作用域链访问外部函数的变量，这就是闭包的核心机制。
3. 闭包的使用场景
3.1 封装与私有变量
闭包常用来创建私有变量，外部函数不能直接访问这些变量，只有通过闭包暴露的接口才能操作它们。
function createCounter() {
let count = 0; // 私有变量
return function() {
count++; // 通过闭包访问和修改
return count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
在这个例子中，count 变量虽然在 createCounter 函数中定义，但由于返回的函数形成了闭包，它依然能访问 count。
3.2 模拟块级作用域
在 let 和 const 出现之前，JavaScript 没有块级作用域，闭包可以用来模拟这种效果。
for (var i = 0; i < 3; i++) {
(function(i) {
setTimeout(function() {
console.log(i); // 0, 1, 2
}, 100);
})(i);
}
3.3 回调函数与异步操作
在 JavaScript 中，异步操作和事件处理器广泛使用闭包。常见场景包括定时器、事件监听器、Ajax 回调等。
function asyncTask(message) {
setTimeout(function() {
console.log(message); // 通过闭包保留 `message`
}, 1000);
}
asyncTask('Hello, Closure!');
4. 闭包的优缺点
4.1 优点
- 数据封装：通过闭包实现私有变量，防止数据污染。
- 状态保持：闭包能够“记住”外部函数的变量状态，适合场景如计数器、缓存等。
4.2 缺点
- 内存泄漏：由于闭包保留了对外部变量的引用，可能导致垃圾回收无法及时清除变量，造成内存泄漏。如果闭包中存在大量无用变量，可能占用较多内存。
- 调试困难：闭包使得变量的作用域更加复杂，调试代码时需要仔细追踪变量的作用域链。
5. 高级闭包技巧
5.1 自执行函数表达式 (IIFE)
自执行函数表达式（Immediately Invoked Function Expression, IIFE）是通过闭包来实现的，将函数定义后立即执行。
(function() {
let privateVar = 'This is private';
console.log(privateVar);
})();
通过这种方式，privateVar 是局部变量，不会污染全局命名空间。
5.2 函数工厂
闭包还可以用于创建函数工厂，根据不同的输入生成不同的行为。
function multiplier(factor) {
return function(num) {
return num * factor; // 闭包保存 `factor`
};
}
let double = multiplier(2);
console.log(double(5)); // 10
let triple = multiplier(3);
console.log(triple(5)); // 15
5.3 函数记忆化
闭包可以实现函数的记忆化（memoization），用于缓存计算结果，优化性能。
function memoize(fn) {
let cache = {};
return function(...args) {
let key = JSON.stringify(args);
if (!cache[key]) {
cache[key] = fn(...args); // 缓存计算结果
}
return cache[key];
};
}
function slowFunction(num) {
let result = num * 2; // 假设这是个耗时计算
return result;
}
let memoizedSlowFunction = memoize(slowFunction);
console.log(memoizedSlowFunction(5)); // 10
console.log(memoizedSlowFunction(5)); // 10 (缓存结果)
6. 闭包与性能
由于闭包会保留引用到外部作用域的变量，错误使用可能造成内存泄漏。因此，在使用闭包时应当注意以下几点：
- 避免不必要的闭包：仅在需要状态保持时使用闭包。
- 及时释放闭包：在闭包不再需要时，将其引用置为
null，以便垃圾回收。 - 避免过度嵌套：深度嵌套的闭包链会增加性能开销。
总结
闭包是 JavaScript 中非常强大且常用的特性，它结合了作用域链的机制，可以保存函数执行时的上下文环境，用于实现私有变量、回调函数、状态保持等多种功能。理解闭包及其工作原理，有助于更好地编写高效、结构清晰的 JavaScript 代码。
原文地址：https://blog.csdn.net/2301_79858914/article/details/142439161
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！