闭包 | Next Web - Champ's World

闭包就是通过外层函数+内层函数的方法，实现能在外层函数外面使用内层函数（而此内层函数还能记住其作用域）的功能。

“函数能记住并访问其词法作用域，即使函数在其作用域之外。“

函数变量私有化，即外部可以通过函数使用这个变量，但不能修改（避免意外修改变量值）。

闭包的形成条件

闭包形成的三个必要条件：

函数嵌套函数
内部函数引用外部函数的变量
内部函数被调用（或返回）

闭包的应用

//实现函数工厂
function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

//防抖和节流
function debounce(func, delay) {
    let timer;
    
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

const handleResize = debounce(function() {
    console.log('窗口大小改变');
}, 300);

window.addEventListener('resize', handleResize);

//事件处理
function setupButtons() {
    const buttons = document.querySelectorAll('button');
    
    buttons.forEach((button, index) => {
        button.addEventListener('click', function() {
            console.log(`按钮 ${index} 被点击`);
        });
    });
}

闭包的优缺点

优点：

创建私有变量和方法
实现数据封装
保持变量状态
实现函数柯里化

函数柯里化是什么

缺点：

可能造成内存泄漏
过度使用可能影响性能
调试困难

闭包一定要return吗？

不一定

1. 将内部函数赋值给外部变量

let innerFunc;

function outer() {
    const outerVar = '我在外部函数中';

		console.log("outer");
    // 将内部函数赋值给外部变量
    innerFunc = function() {
        console.log(outerVar);
    };
}

outer(); // 执行outer函数
innerFunc(); // 输出: "我在外部函数中"

2. 通过事件监听器

function setupButton() {
    const message = '按钮被点击了！';

    document.getElementById('myButton').addEventListener('click', function() {
        // 这个回调函数形成了闭包，能够访问message
        console.log(message);
    });
}

setupButton();
// 即使setupButton执行完毕，点击按钮时仍能访问message变量

3. 通过定时器/异步操作

function delayedMessage() {
    const msg = '延迟消息';

    setTimeout(function() {
        // 这个回调函数形成了闭包
        console.log(msg);
    }, 1000);
}

delayedMessage();
// delayedMessage执行完毕后，定时器回调仍能访问msg

4. 在对象方法中

let obj;

function createObject() {
    const privateData = '私有数据';
    
    obj = {
        getData: function() {
            return privateData;
        }
    };
}

createObject();
console.log(obj.getData()); // "私有数据"
// obj.getData方法形成了闭包，可以访问privateData