javascript闭包如何延迟变量初始化

function createLazyInitializer(valueToProcess) {
    // valueToProcess 在这里被捕获，但其“处理”被延迟
    console.log(`[外部作用域] 变量 '${valueToProcess}' 已准备好被捕获。`);

    return function() {
        // 只有当这个内部函数被调用时，才真正“使用”或“处理” valueToProcess
        console.log(`[闭包内部] 正在处理变量：${valueToProcess.toUpperCase()}。`);
        return valueToProcess.toUpperCase();
    };
}

const lazyProcessor = createLazyInitializer("hello closure");
console.log("------------------------------------------");
console.log("闭包已创建，但内部处理尚未执行。");
// 此时，createLazyInitializer 已经执行完毕，"hello closure" 被捕获，但toUpperCase()还没被调用

// 只有当调用 lazyProcessor() 时，内部逻辑才真正执行
const result = lazyProcessor();
console.log(`处理结果：${result}`);

// 再调用一次，它会再次执行内部逻辑
const anotherResult = lazyProcessor();
console.log(`再次处理结果：${anotherResult}`);

"hello closure"

createLazyInitializer

toUpperCase()

lazyProcessor()

// 传统循环问题，不使用闭包
// const buttons = document.querySelectorAll('button');
// for (var i = 0; i < buttons.length; i++) {
//     buttons[i].onclick = function() {
//         console.log('你点击了按钮 ' + i); // 永远输出 '你点击了按钮 3' (假设有3个按钮)
//     };
// }

// 使用闭包解决，延迟绑定i的值
// const buttons = document.querySelectorAll('button');
// for (let i = 0; i < buttons.length; i++) { // 使用let，每次循环都会创建一个新的块级作用域
//     buttons[i].onclick = function() {
//         console.log('你点击了按钮 ' + i); // 输出正确的索引
//     };
// }

// 更明确的闭包延迟初始化（如果不用let）
function setupButton(button, index) {
    button.onclick = function() {
        console.log('你点击了按钮 ' + index); // index被闭包捕获
    };
}
// const buttons = document.querySelectorAll('button');
// for (var i = 0; i < buttons.length; i++) {
//     setupButton(buttons[i], i);
// }

let

const

var

function createLazyDataLoader(url) {
    let cachedData = null; // 用于缓存数据
    let isLoading = false; // 避免重复请求

    return async function() {
        if (cachedData) {
            console.log(`[惰性加载器] 数据已缓存，直接返回。`);
            return cachedData;
        }

        if (isLoading) {
            console.log(`[惰性加载器] 正在加载中，请稍候...`);
            // 这里可以返回一个Promise，等待加载完成
            // 实际应用中可能需要更复杂的等待机制
            return new Promise(resolve => {
                const checkInterval = setInterval(() => {
                    if (!isLoading && cachedData) {
                        clearInterval(checkInterval);
                        resolve(cachedData);
                    }
                }, 100);
            });
        }

        isLoading = true;
        console.log(`[惰性加载器] 首次加载数据从：${url}`);
        try {
            // 模拟网络请求
            const response = await new Promise(resolve => setTimeout(() => {
                console.log(`[模拟网络] ${url} 数据加载完成。`);
                resolve({ message: `Data from ${url} loaded!`, timestamp: Date.now() });
            }, 1500));
            cachedData = response;
            return cachedData;
        } catch (error) {
            console.error(`[惰性加载器] 加载失败:`, error);
            throw error;
        } finally {
            isLoading = false;
        }
    };
}

const getUserData = createLazyDataLoader("/api/user");
const getProductData = createLazyDataLoader("/api/products");

console.log("------------------------------------------");
console.log("页面初始化，数据加载器已创建，但数据尚未加载。");

// 假设用户点击了“查看用户信息”按钮
setTimeout(async () => {
    console.log("\n--- 模拟用户操作：查看用户信息 ---");
    const user = await getUserData();
    console.log("获取到用户数据:", user);

    // 再次获取用户数据，会直接使用缓存
    const userAgain = await getUserData();
    console.log("再次获取用户数据:", userAgain);
}, 1000);

// 假设用户点击了“查看产品信息”按钮，但比用户信息晚
setTimeout(async () => {
    console.log("\n--- 模拟用户操作：查看产品信息 ---");
    const products = await getProductData();
    console.log("获取到产品数据:", products);
}, 3000);

function createLeakyClosure() {
    let largeArray = new Array(1000000).fill('some_data'); // 很大的数组
    let element = document.getElementById('someButton'); // 假设这里获取了一个DOM元素

    // 这个闭包被返回并可能被外部持有
    // 即使createLeakyClosure执行完毕，largeArray和element也不会被回收
    // 因为clickHandler持续引用着它们
    if (element) {
        element.onclick = function() {
            console.log('点击事件触发，但largeArray可能持续占用内存。');
            // 实际操作可能只用到很小一部分数据，但整个largeArray被捕获
        };
    }
    // 这里的返回是为了演示，实际中可能直接绑定事件
    return element ? element.onclick : null;
}

// 假设我们调用了 createLeakyClosure，并且返回的函数被某个地方引用
// const handler = createLeakyClosure();
// 如果handler一直存在，或者绑定到DOM元素上且DOM元素不被移除，内存就可能泄露

null

function createCounter() {
    let count = 0; // 外部变量

    return {
        increment: function() {
            count++;
            console.log('递增到:', count);
        },
        decrement: function() {
            count--;
            console.log('递减到:', count);
        },
        getCount: function() {
            return count;
        }
    };
}

const counter1 = createCounter();
const counter2 = createCounter(); // 注意：这是另一个独立的计数器实例

counter1.increment(); // 递增到: 1
counter1.increment(); // 递增到: 2
counter2.increment(); // 递增到: 1 (独立的实例)
counter1.decrement(); // 递减到: 1 (影响的是counter1的count)
console.log('Counter1 current:', counter1.getCount()); // 1
console.log('Counter2 current:', counter2.getCount()); // 1
// 上面是正确的，因为createCounter每次调用都创建了新的作用域和count变量。

// 假设我们错误地让多个闭包共享同一个外部变量（不常见的错误，但在复杂场景可能发生）
let sharedCount = 0;
function createSharedCounter() {
    return {
        increment: function() {
            sharedCount++; // 共享的变量
            console.log('共享计数递增到:', sharedCount);
        },
        getCount: function() {
            return sharedCount;
        }
    };
}

const sCounter1 = createSharedCounter();
const sCounter2 = createSharedCounter();

sCounter1.increment(); // 共享计数递增到: 1
sCounter2.increment(); // 共享计数递增到: 2 (sCounter2也修改了sharedCount)
console.log('共享计数器1的值:', sCounter1.getCount()); // 2
console.log('共享计数器2的值:', sCounter2.getCount()); // 2
// 这里的意图如果是希望sCounter1和sCounter2各自维护自己的计数，那就会出问题。