javascript闭包怎么在回调中传递参数

function createClickHandler(index) {
    // index 是外部函数的参数，被内部函数（闭包）“捕获”
    return function() {
        console.log("你点击了按钮 " + (index + 1));
        // 这里可以执行其他操作，使用 index
    };
}

const buttons = document.querySelectorAll('.my-button');
buttons.forEach((button, i) => {
    button.addEventListener('click', createClickHandler(i));
});

// 假设 HTML 结构是这样的：
/*
<button class="my-button">按钮 1</button>
<button class="my-button">按钮 2</button>
<button class="my-button">按钮 3</button>
*/

createClickHandler

index

forEach

createClickHandler(i)

i

i

index

setTimeout

setInterval

Promise

addEventListener

for

i

i

i

for

i

i

setTimeout

for (let j = 0; j < 3; j++) {
    // 使用立即执行函数表达式 (IIFE) 也可以创建闭包，效果类似
    // 尽管现在更推荐使用 let 或 const 声明块级作用域变量
    (function(currentJ) {
        setTimeout(function() {
            console.log("这是延迟消息，来自循环迭代 " + currentJ);
        }, currentJ * 1000); // 每次延迟不同
    })(j); // 立即执行，将当前的 j 传递给闭包
}

// 或者更简洁，直接利用 let 的块级作用域特性
for (let k = 0; k < 3; k++) {
    setTimeout(() => { // 箭头函数本身没有自己的 this，但它会捕获父作用域的变量
        console.log("这是延迟消息，来自循环迭代 (let) " + k);
    }, k * 1000 + 500); // 错开时间，避免混淆
}

let

k

setTimeout

j

k

fetch

then

catch

function fetchDataWithContext(userId, requestType) {
    return fetch(`https://api.example.com/data/${userId}`)
        .then(response => response.json())
        .then(data => {
            // 在这里，userId 和 requestType 依然可以通过闭包访问到
            console.log(`用户 ${userId} 的 ${requestType} 数据已加载:`, data);
            return data;
        })
        .catch(error => {
            console.error(`加载用户 ${userId} 的 ${requestType} 数据失败:`, error);
            throw error; // 重新抛出错误以便链式处理
        });
}

fetchDataWithContext('user123', 'profile');
fetchDataWithContext('user456', 'orders');

fetchDataWithContext

userId

requestType

then

catch

fetchDataWithContext

removeEventListener