JavaScript闭包

在本章节中，我们将学习JavaScript闭包的相关知识，包括闭包的基本概念、工作原理、适用场景、优缺点和注意事项等内容。

1. 什么是闭包？

闭包（Closure）是指有权访问另一个函数作用域中变量的函数。简单来说，闭包就是函数和其词法环境的组合。

当一个函数被创建并返回时，它会携带自己的词法环境，这个词法环境包含了它在定义时所能访问的所有变量。即使函数在其定义的作用域之外被调用，它仍然可以访问这些变量。

// 闭包示例
function outer() {
    let outerVar = "外部函数变量";
    
    function inner() {
        // inner函数可以访问outer函数的变量
        console.log(outerVar); // 输出：外部函数变量
    }
    
    return inner;
}

// 创建闭包
let closure = outer();

// 调用闭包，即使outer函数已经执行完毕，仍然可以访问outerVar
closure(); // 输出：外部函数变量

2. 闭包的工作原理

闭包的工作原理基于JavaScript的作用域链和词法环境。

2.1 词法环境

词法环境（Lexical Environment）是JavaScript引擎内部用于存储变量和函数声明的结构。每个词法环境都包含两个部分：

• 环境记录：存储变量和函数声明的实际位置
• 外部词法环境引用：指向外部词法环境的引用，形成作用域链

当一个函数被创建时，它会捕获并保存当前的词法环境，包括其中的变量和函数声明。

2.2 作用域链

当函数访问一个变量时，JavaScript引擎会先在当前词法环境中查找该变量，如果找不到，就会沿着外部词法环境引用向上查找，直到找到该变量或到达全局词法环境。这种由多个词法环境组成的链式结构称为作用域链。

2.3 闭包的创建过程

1. 当外部函数执行时，会创建一个新的词法环境，其中包含外部函数的变量和函数声明。
2. 当内部函数被创建时，它会捕获并保存对外部函数词法环境的引用。
3. 当外部函数返回内部函数时，内部函数会携带这个引用，形成闭包。
4. 当闭包被调用时，它会使用保存的词法环境引用来查找变量。

// 闭包的创建过程
function outer() {
    let outerVar = "外部函数变量";
    let outerVar2 = "外部函数变量2";
    
    function inner() {
        console.log(outerVar); // 访问外部函数变量
    }
    
    return inner;
}

let closure = outer(); // outer函数执行完毕，但其词法环境被inner函数捕获
closure(); // 输出：外部函数变量

3. 闭包的常见应用场景

3.1 封装私有变量

闭包可以用于封装私有变量，防止外部直接访问和修改。

// 使用闭包封装私有变量
function createCounter() {
    let count = 0; // 私有变量，外部无法直接访问
    
    return {
        increment: function() {
            count++;
            return count;
        },
        decrement: function() {
            count--;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
}

let counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1
console.log(counter.getCount()); // 1
console.log(counter.count); // undefined（无法直接访问私有变量）

3.2 实现函数柯里化

函数柯里化（Currying）是指将一个接受多个参数的函数转换为一系列接受单个参数的函数的过程。闭包是实现函数柯里化的关键。

// 使用闭包实现函数柯里化
function curry(func) {
    return function curried(...args) {
        if (args.length >= func.length) {
            return func.apply(this, args);
        }
        return function(...moreArgs) {
            return curried.apply(this, args.concat(moreArgs));
        };
    };
}

// 示例：柯里化加法函数
function add(a, b, c) {
    return a + b + c;
}

let curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 6
console.log(curriedAdd(1)(2, 3)); // 6

3.3 实现模块模式

模块模式是JavaScript中用于创建模块化代码的一种设计模式，它使用闭包来封装私有变量和方法，只暴露公共接口。

// 使用闭包实现模块模式
let module = (function() {
    // 私有变量
    let privateVar = "私有变量";
    
    // 私有方法
    function privateMethod() {
        console.log("私有方法");
    }
    
    // 公共接口
    return {
        publicVar: "公共变量",
        publicMethod: function() {
            console.log("公共方法");
            console.log(privateVar); // 可以访问私有变量
            privateMethod(); // 可以调用私有方法
        },
        getPrivateVar: function() {
            return privateVar;
        }
    };
})();

console.log(module.publicVar); // 公共变量
module.publicMethod(); // 公共方法，私有变量，私有方法
console.log(module.getPrivateVar()); // 私有变量
console.log(module.privateVar); // undefined（无法直接访问私有变量）
module.privateMethod(); // 报错：module.privateMethod is not a function（无法直接调用私有方法）

3.4 保持变量的状态

闭包可以用于保持变量的状态，即使函数已经执行完毕。

// 使用闭包保持变量的状态
function createTimer() {
    let seconds = 0;
    
    setInterval(function() {
        seconds++;
        console.log(`已经过了${seconds}秒`);
    }, 1000);
    
    return function() {
        return seconds;
    };
}

let getSeconds = createTimer();
// 每秒钟输出一次时间
// 可以通过getSeconds()获取当前秒数
console.log(getSeconds()); // 0（立即调用，此时定时器还未执行）
setTimeout(function() {
    console.log(getSeconds()); // 5（5秒后调用）
}, 5000);

3.5 事件处理

闭包在事件处理中非常有用，可以用于保存事件处理函数所需的上下文信息。

// 使用闭包处理事件
function setupEventListeners() {
    let count = 0;
    
    let button = document.getElementById("myButton");
    let resultDiv = document.getElementById("result");
    
    button.addEventListener("click", function() {
        count++;
        resultDiv.textContent = `按钮被点击了${count}次`;
    });
}

// 调用函数设置事件监听器
setupEventListeners();

4. 闭包的优缺点

4.1 优点

• 封装私有变量：闭包可以用于封装私有变量，防止外部直接访问和修改
• 保持变量状态：闭包可以保持变量的状态，即使函数已经执行完毕
• 实现函数柯里化：闭包是实现函数柯里化的关键
• 实现模块模式：闭包可以用于实现模块模式，创建模块化代码
• 事件处理：闭包在事件处理中非常有用，可以保存事件处理函数所需的上下文信息

4.2 缺点

• 内存泄漏：闭包会导致变量无法被垃圾回收，从而造成内存泄漏
• 性能问题：闭包会增加函数的执行时间和内存消耗
• 难以调试：闭包的嵌套结构可能导致代码难以调试

5. 闭包的注意事项

5.1 避免内存泄漏

闭包会导致变量无法被垃圾回收，从而造成内存泄漏。为了避免内存泄漏，应该：

• 只在必要时使用闭包
• 及时释放不再需要的闭包引用
• 避免在闭包中引用大型对象

// 避免内存泄漏的示例
function createClosure() {
    let largeObject = new Array(1000000).fill(0); // 大型对象
    
    return function() {
        console.log(largeObject.length);
    };
}

let closure = createClosure();
closure(); // 1000000

// 不再需要闭包时，释放引用losure = null; // 允许大型对象被垃圾回收

5.2 注意闭包中的this

闭包中的this值取决于闭包的调用方式，而不是定义时的上下文。

// 闭包中的this
let obj = {
    name: "对象",
    createClosure: function() {
        return function() {
            console.log(this); // this指向window或global对象
            console.log(this.name); // undefined
        };
    },
    createArrowClosure: function() {
        return () => {
            console.log(this); // this指向obj对象
            console.log(this.name); // 输出：对象
        };
    }
};

let closure1 = obj.createClosure();
closure1(); // window或global对象，undefined

let closure2 = obj.createArrowClosure();
closure2(); // obj对象，对象

5.3 注意闭包中的变量引用

闭包引用的是变量本身，而不是变量的值。如果变量的值在闭包创建后发生变化，闭包访问到的将是变化后的值。

// 闭包中的变量引用
function createClosures() {
    let closures = [];
    
    for (var i = 0; i < 3; i++) {
        closures.push(function() {
            console.log(i); // 引用的是变量i本身
        });
    }
    
    return closures;
}

let closures = createClosures();
closures[0](); // 3
closures[1](); // 3
closures[2](); // 3

// 解决方法1：使用let（块级作用域）
function createClosuresWithLet() {
    let closures = [];
    
    for (let i = 0; i < 3; i++) {
        closures.push(function() {
            console.log(i); // 每个闭包捕获的是不同的i值
        });
    }
    
    return closures;
}

let closuresWithLet = createClosuresWithLet();
closuresWithLet[0](); // 0
closuresWithLet[1](); // 1
closuresWithLet[2](); // 2

// 解决方法2：使用立即执行函数表达式（IIFE）
function createClosuresWithIIFE() {
    let closures = [];
    
    for (var i = 0; i < 3; i++) {
        closures.push((function(j) {
            return function() {
                console.log(j); // 每个闭包捕获的是不同的j值
            };
        })(i));
    }
    
    return closures;
}

let closuresWithIIFE = createClosuresWithIIFE();
closuresWithIIFE[0](); // 0
closuresWithIIFE[1](); // 1
closuresWithIIFE[2](); // 2

6. 闭包的实际应用示例

6.1 实现计数器

// 实现计数器
function createCounter(initialValue = 0) {
    let count = initialValue;
    
    return {
        increment: function() {
            return ++count;
        },
        decrement: function() {
            return --count;
        },
        reset: function() {
            count = initialValue;
            return count;
        },
        getCount: function() {
            return count;
        }
    };
}

// 使用计数器
let counter = createCounter(10);
console.log(counter.increment()); // 11
console.log(counter.increment()); // 12
console.log(counter.decrement()); // 11
console.log(counter.reset()); // 10
console.log(counter.getCount()); // 10

6.2 实现缓存函数

// 实现缓存函数
function memoize(func) {
    let cache = {};
    
    return function(...args) {
        let key = JSON.stringify(args);
        
        if (cache[key]) {
            console.log("使用缓存");
            return cache[key];
        }
        
        let result = func.apply(this, args);
        cache[key] = result;
        console.log("计算结果");
        
        return result;
    };
}

// 使用缓存函数
function expensiveFunction(n) {
    console.log(`计算${n}的阶乘`);
    let result = 1;
    for (let i = 1; i <= n; i++) {
        result *= i;
    }
    return result;
}

let memoizedExpensiveFunction = memoize(expensiveFunction);
console.log(memoizedExpensiveFunction(5)); // 计算结果
console.log(memoizedExpensiveFunction(5)); // 使用缓存
console.log(memoizedExpensiveFunction(10)); // 计算结果
console.log(memoizedExpensiveFunction(10)); // 使用缓存

6.3 实现防抖函数

// 实现防抖函数
function debounce(func, delay) {
    let timerId;
    
    return function(...args) {
        clearTimeout(timerId);
        timerId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

// 使用防抖函数
let debouncedSearch = debounce(function(query) {
    console.log(`搜索：${query}`);
    // 实际的搜索逻辑
}, 300);

// 模拟用户输入
debouncedSearch("JavaScript");
debouncedSearch("JavaScript 闭包");
debouncedSearch("JavaScript 闭包 教程");
// 只有最后一次调用会在300毫秒后执行

6.4 实现节流函数

// 实现节流函数
function throttle(func, delay) {
    let lastCall = 0;
    
    return function(...args) {
        let now = Date.now();
        
        if (now - lastCall >= delay) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

// 使用节流函数
let throttledScroll = throttle(function() {
    console.log(`滚动位置：${window.scrollY}`);
    // 实际的滚动处理逻辑
}, 200);

// 监听滚动事件
window.addEventListener("scroll", throttledScroll);
// 滚动事件会每隔200毫秒执行一次

7. 常见问题解答

Q: 什么是闭包？

A: 闭包是指有权访问另一个函数作用域中变量的函数。简单来说，闭包就是函数和其词法环境的组合。

Q: 闭包的工作原理是什么？

A: 闭包的工作原理基于JavaScript的作用域链和词法环境。当一个函数被创建时，它会捕获并保存当前的词法环境，包括其中的变量和函数声明。当函数访问一个变量时，JavaScript引擎会先在当前词法环境中查找该变量，如果找不到，就会沿着外部词法环境引用向上查找，直到找到该变量或到达全局词法环境。

Q: 闭包有什么优点？

A: 闭包的优点包括：封装私有变量、保持变量状态、实现函数柯里化、实现模块模式、事件处理等。

Q: 闭包有什么缺点？

A: 闭包的缺点包括：内存泄漏、性能问题、难以调试等。

Q: 如何避免闭包导致的内存泄漏？

A: 为了避免闭包导致的内存泄漏，应该只在必要时使用闭包，及时释放不再需要的闭包引用，避免在闭包中引用大型对象。

Q: 闭包中的this值是如何确定的？

A: 闭包中的this值取决于闭包的调用方式，而不是定义时的上下文。

Q: 闭包中的变量引用有什么注意事项？

A: 闭包引用的是变量本身，而不是变量的值。如果变量的值在闭包创建后发生变化，闭包访问到的将是变化后的值。

Q: 闭包在实际开发中有哪些应用场景？

A: 闭包在实际开发中的应用场景包括：封装私有变量、实现函数柯里化、实现模块模式、保持变量状态、事件处理、实现缓存函数、实现防抖函数、实现节流函数等。

8. 练习项目

1. 创建一个HTML文件，包含以下内容：

   • 一个输入框，用于输入搜索关键词
   • 一个显示搜索结果的区域

2. 使用JavaScript实现以下功能：

   • 实现一个防抖函数，用于处理搜索输入
   • 使用闭包封装搜索逻辑，包括缓存搜索结果
   • 当用户输入时，使用防抖函数延迟执行搜索
   • 如果搜索关键词相同，使用缓存结果
   • 在结果区域显示搜索结果
   • 显示搜索耗时

3. 测试不同的搜索关键词，确保防抖和缓存功能正常工作

9. 小结

• 闭包是指有权访问另一个函数作用域中变量的函数
• 闭包的工作原理基于JavaScript的作用域链和词法环境
• 闭包可以用于封装私有变量、保持变量状态、实现函数柯里化、实现模块模式等
• 闭包的优点包括封装性好、可以保持变量状态等
• 闭包的缺点包括可能导致内存泄漏、性能问题等
• 使用闭包时需要注意避免内存泄漏、注意闭包中的this值、注意闭包中的变量引用等
• 闭包在实际开发中有广泛的应用，如事件处理、缓存函数、防抖函数、节流函数等

闭包是JavaScript中的一个重要概念，掌握闭包对于理解JavaScript的作用域和函数执行机制至关重要。通过合理使用闭包，可以编写更加模块化、封装性更好的代码，但同时也需要注意闭包可能带来的内存泄漏和性能问题。