闭包

2. 函数柯里化 (Currying)

// 柯里化：把多参数函数转化为单参数函数序列
function curry(fn) {
    return function curried(...args) {
        if (args.length >= fn.length) {
            return fn.apply(this, args);
        } else {
            return function (...args2) {
                return curried.apply(this, args.concat(args2));
            };
        }
    };
}

// 使用示例
function add(a, b, c) {
    return a + b + c;
}

const curriedAdd = curry(add);

console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 6
console.log(curriedAdd(1)(2, 3)); // 6

// 实用的柯里化应用
function createLogger(prefix) {
    return function (message) {
        return function (level) {
            return `[${level.toUpperCase()}] ${prefix}: ${message}`;
        };
    };
}

const appLogger = createLogger("App");
const errorLogger = appLogger("Something went wrong");
console.log(errorLogger("error")); // [ERROR] App: Something went wrong

3. 记忆化 (Memoization)

function memoize(fn) {
    const cache = new Map();

    return function (...args) {
        const key = JSON.stringify(args);

        if (cache.has(key)) {
            console.log("Cache hit!");
            return cache.get(key);
        }

        console.log("Calculating...");
        const result = fn.apply(this, args);
        cache.set(key, result);
        return result;
    };
}

// 使用示例
function expensiveCalculation(n) {
    console.log(`Calculating ${n}...`);
    let result = 0;
    for (let i = 0; i < n * 1000000; i++) {
        result += Math.random();
    }
    return result;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.log(memoizedCalculation(10)); // 第一次计算
console.log(memoizedCalculation(10)); // 从缓存读取
console.log(memoizedCalculation(20)); // 新的计算

4. 状态管理

function createStateMachine(initialState) {
    let state = initialState;
    let listeners = [];

    function getState() {
        return state;
    }

    function setState(newState) {
        const oldState = state;
        state = newState;

        // 通知所有监听者
        listeners.forEach(listener => {
            listener(state, oldState);
        });
    }

    function subscribe(listener) {
        listeners.push(listener);

        // 返回取消订阅函数
        return function unsubscribe() {
            listeners = listeners.filter(l => l !== listener);
        };
    }

    return {
        getState,
        setState,
        subscribe,
    };
}

// 使用示例
const store = createStateMachine({ count: 0 });

const unsubscribe = store.subscribe((state, oldState) => {
    console.log("State changed:", oldState, "→", state);
});

store.setState({ count: 1 }); // 触发监听
store.setState({ count: 2 }); // 触发监听
unsubscribe();
store.setState({ count: 3 }); // 不会触发监听

5. 防抖和节流

// 防抖 (Debounce)
function debounce(fn, delay) {
    let timeoutId;

    return function (...args) {
        clearTimeout(timeoutId);

        timeoutId = setTimeout(() => {
            fn.apply(this, args);
        }, delay);
    };
}

// 节流 (Throttle)
function throttle(fn, limit) {
    let inThrottle;

    return function (...args) {
        if (!inThrottle) {
            fn.apply(this, args);
            inThrottle = true;

            setTimeout(() => {
                inThrottle = false;
            }, limit);
        }
    };
}

// 使用示例
const handleResize = debounce(function () {
    console.log("Window resized:", window.innerWidth);
}, 300);

window.addEventListener("resize", handleResize);

const handleScroll = throttle(function () {
    console.log("Scrolling...");
}, 1000);

window.addEventListener("scroll", handleScroll);

闭包与面向对象

1. 模拟私有属性

function Person(name, age) {
    // 私有变量
    let _age = age;

    this.name = name; // 公共属性

    // 特权方法：可以访问私有变量
    this.getAge = function () {
        return _age;
    };

    this.setAge = function (newAge) {
        if (newAge > 0) {
            _age = newAge;
        }
    };

    // 私有方法
    function validateName(name) {
        return typeof name === "string" && name.length > 0;
    }

    // 在构造函数中验证
    if (!validateName(name)) {
        throw new Error("Invalid name");
    }
}

const person = new Person("Alice", 25);
console.log(person.name); // 'Alice'
console.log(person.getAge()); // 25
console.log(person._age); // undefined
person.setAge(26);
console.log(person.getAge()); // 26

2. 工厂函数模式

function createPerson(name) {
    let mood = "happy";
    let secrets = [];

    return {
        getName: () => name,

        greet: () => {
            return `Hi, I'm ${name} and I'm feeling ${mood}!`;
        },

        changeMood: newMood => {
            const validMoods = ["happy", "sad", "angry", "excited"];
            if (validMoods.includes(newMood)) {
                mood = newMood;
            }
        },

        addSecret: secret => {
            secrets.push(secret);
            console.log(`${name} now has ${secrets.length} secrets`);
        },

        revealSecrets: () => {
            if (mood === "happy") {
                return secrets;
            }
            return ["I cannot reveal secrets when I'm not happy"];
        },
    };
}

const alice = createPerson("Alice");
console.log(alice.greet()); // "Hi, I'm Alice and I'm feeling happy!"
alice.addSecret("I once broke a vase");
alice.changeMood("sad");
console.log(alice.revealSecrets()); // ["I cannot reveal secrets when I'm not happy"]

闭包与函数式编程

1. 函数组合

// 组合多个函数
function compose(...fns) {
    return function (x) {
        return fns.reduceRight((acc, fn) => fn(acc), x);
    };
}

// 管道（从左到右执行）
function pipe(...fns) {
    return function (x) {
        return fns.reduce((acc, fn) => fn(acc), x);
    };
}

// 使用示例
const add5 = x => x + 5;
const multiply3 = x => x * 3;
const square = x => x * x;

const composed = compose(square, multiply3, add5);
console.log(composed(2)); // ((2 + 5) * 3)^2 = 441

const piped = pipe(add5, multiply3, square);
console.log(piped(2)); // ((2 + 5) * 3)^2 = 441

// 实用示例：数据处理管道
const users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 },
    { name: "Charlie", age: 35 },
];

const processUsers = pipe(
    users => users.filter(u => u.age >= 30),
    users => users.map(u => ({ ...u, isSenior: true })),
    users => users.sort((a, b) => b.age - a.age)
);

console.log(processUsers(users));

2. 偏函数应用 (Partial Application)

function partial(fn, ...presetArgs) {
    return function (...laterArgs) {
        return fn.apply(this, presetArgs.concat(laterArgs));
    };
}

// 使用示例
function sendRequest(method, url, data, headers) {
    console.log(`Sending ${method} request to ${url}`);
    console.log("Data:", data);
    console.log("Headers:", headers);
}

const sendGetRequest = partial(sendRequest, "GET", "https://api.example.com");
const sendPostRequest = partial(sendRequest, "POST", "https://api.example.com");

// 使用部分应用的函数
sendGetRequest(null, { "Content-Type": "application/json" });
sendPostRequest({ id: 1 }, { Authorization: "Bearer token" });

// 更灵活的偏函数
function partialRight(fn, ...presetArgs) {
    return function (...earlyArgs) {
        return fn.apply(this, earlyArgs.concat(presetArgs));
    };
}

const sendRequestWithHeaders = partialRight(sendRequest, { "Content-Type": "application/json" });

sendRequestWithHeaders("PUT", "https://api.example.com/data", { id: 1 });

闭包的陷阱与优化

1. 内存泄漏

// 潜在的内存泄漏
function createLeakyClosure() {
    const largeData = new Array(1000000).fill("data");

    return function () {
        console.log("I have access to largeData");
        // 即使不需要，largeData 也无法被垃圾回收
    };
}

// 解决方案：及时清理引用
function createSafeClosure() {
    const largeData = new Array(1000000).fill("data");

    function processData() {
        const result = largeData.length;
        // 处理完数据后，清除对大数据的引用
        // 注意：这里只是示例，实际需要根据具体情况处理
        return function () {
            return result; // 只保留需要的结果
        };
    }

    const inner = processData();
    // 帮助垃圾回收
    // delete largeData; // 不能直接删除，但可以赋值为 null
    return inner;
}

2. 性能优化

// 避免在热代码路径中创建不必要的闭包
function processItems(items) {
    // 不好的做法：每次循环都创建新函数
    return items.map(function (item) {
        return function () {
            return item * 2;
        };
    });

    // 更好的做法：预定义函数
    const double = x => x * 2;
    return items.map(item => () => double(item));
}

// 闭包缓存
function createCachedClosure() {
    const cache = new Map();

    return function (key, compute) {
        if (cache.has(key)) {
            return cache.get(key);
        }

        const value = compute();
        cache.set(key, value);
        return value;
    };
}

const cached = createCachedClosure();
const expensive = cached("expensive", () => {
    console.log("Computing...");
    return Math.random();
});

console.log(expensive);
console.log(cached("expensive", () => Math.random())); // 从缓存读取

实际应用场景

1. React Hooks 的实现原理

// 简化的 useState 实现
function createUseState(initialValue) {
    let state = initialValue;
    let listeners = [];

    return function useState() {
        // 闭包记住了 state 和 listeners

        const setState = newValue => {
            state = newValue;
            listeners.forEach(listener => listener());
        };

        const subscribe = listener => {
            listeners.push(listener);
            return () => {
                listeners = listeners.filter(l => l !== listener);
            };
        };

        return [state, setState, subscribe];
    };
}

// 使用示例
const useCustomState = createUseState(0);

function Counter() {
    const [count, setCount, subscribe] = useCustomState();

    // 模拟 React 的重新渲染
    subscribe(() => {
        console.log("State changed:", count);
    });

    return {
        increment: () => setCount(count + 1),
        getCount: () => count,
    };
}

const counter = Counter();
console.log(counter.getCount()); // 0
counter.increment(); // State changed: 0
console.log(counter.getCount()); // 1

2. 中间件模式

function createMiddleware() {
    const middlewares = [];

    function use(middleware) {
        middlewares.push(middleware);
    }

    function dispatch(action) {
        let index = 0;

        function next() {
            if (index < middlewares.length) {
                const middleware = middlewares[index];
                index++;
                return middleware(action, next);
            }
            return action;
        }

        return next();
    }

    return { use, dispatch };
}

// 使用示例
const middlewareSystem = createMiddleware();

// 日志中间件
middlewareSystem.use((action, next) => {
    console.log("Action started:", action);
    const result = next();
    console.log("Action completed:", action);
    return result;
});

// 验证中间件
middlewareSystem.use((action, next) => {
    if (action.type === "INCREMENT") {
        console.log("Validating increment...");
    }
    return next();
});

const result = middlewareSystem.dispatch({ type: "INCREMENT", payload: 5 });

最佳实践

1. 明确闭包意图：

• 公共 API：保持清晰简单
• 内部实现：隐藏复杂性

2. 内存管理：

• 及时清理不再需要的引用
• 避免循环引用
• 对大对象谨慎使用闭包

3. 性能考虑：

• 避免在循环中创建闭包
• 缓存重复计算的结果
• 考虑使用对象替代多个闭包

4. 测试友好：

• 提供访问私有状态的方法用于测试
• 保持闭包的纯度（无副作用）便于测试

5. 文档化：

• 说明闭包捕获了哪些变量
• 记录闭包的副作用

6. 安全考虑：

• 避免在闭包中暴露敏感数据
• 验证闭包接收的输入