如何在JavaScript click事件外部访问被其修改的变量？

你的代码里确实可以在click事件外部访问Year变量，但当前console.log(Year)输出2022是因为执行时机的问题——log语句在ModifyYear函数执行时就立刻运行了，而按钮的click回调要等用户点击后才会触发修改Year的值，所以此时log拿到的还是初始值。

下面是几种可行的解决方式：

方式1：在点击触发后执行访问逻辑 #

把需要获取修改后Year的操作放到click回调里，或者在回调中调用相关函数：

const ModifyYear = () =>
{
    const button = document.querySelector(".button");
    let Year = 2022;
    
    // 封装访问Year的逻辑
    const showYear = () => {
        console.log(Year);
    }
    
    button.addEventListener("click", () =>
    {
        Year = 2023;
        showYear(); // 点击后输出2023
    })
}

方式2：将Year提升到外部作用域 #

如果需要在ModifyYear函数外部也能访问Year，可以把变量声明移到函数外部：

let Year = 2022; // 提升至外部作用域
const ModifyYear = () =>
{
    const button = document.querySelector(".button");
    
    button.addEventListener("click", () =>
    {
        Year = 2023;
    })
}

// 外部可以随时访问，点击按钮后Year会变为2023
// 比如用定时器模拟后续访问
setTimeout(() => {
    console.log(Year);
}, 5000);

方式3：用闭包暴露访问方法 #

不想污染全局作用域的话，可以通过闭包返回一个获取Year的方法，在外部通过这个方法访问：

const ModifyYear = () =>
{
    const button = document.querySelector(".button");
    let Year = 2022;
    
    button.addEventListener("click", () =>
    {
        Year = 2023;
    })
    
    // 返回访问Year的接口
    return {
        getCurrentYear: () => Year
    }
}

const yearManager = ModifyYear();
// 点击按钮后调用方法获取最新值
document.querySelector(".button").addEventListener('click', () => {
    console.log(yearManager.getCurrentYear()); // 输出2023
})

内容的提问来源于stack exchange，提问作者Javi Úbeda