JavaScript如何在函数外部获取score++自增后的最新值

你代码里事件绑定之后写的console.log(score)是页面刚加载完成就同步执行的，这时候用户还没触发任何点击操作，点击回调里的score++一次都没运行过，读到的自然是初始值0。
score本身声明在全局作用域，所有函数都能正常访问，不存在“函数外部拿不到变量”的问题，核心矛盾是你读取值的时机不对：JS不会自动追踪变量变化、重新执行之前跑过的代码，你在值还没更新的时候就读取，永远拿不到后续点击后的最新结果。

方法1：值更新后直接调用依赖该值的逻辑（最常用） #

所有需要用到最新score的业务逻辑，都可以在score完成更新后直接触发，把最新值作为参数传入即可：

let score = 0;
let clickHere = document.getElementById("clickHere");

// 自定义的、需要用到最新score的函数
function useLatestScore(newScore) {
  console.log("当前最新分数：", newScore);
  // 在这里写所有依赖新分数的逻辑，比如更新页面展示、做数值计算、触发后续交互都可以
}

clickHere.addEventListener("click", () => {
  score++;
  // 分数更新后立刻调用处理函数，传入最新值
  useLatestScore(score);
});

按照这个写法，用户点5次按钮，useLatestScore就会被触发5次，依次拿到1、2、3、4、5的最新值，完全符合你的需求。

方法2：在合适的时机主动读取全局score #

如果你的逻辑不是由点击按钮直接触发，只要保证执行逻辑时用户已经完成点击操作，直接读取全局的score变量就能拿到最新值，举个常见场景：

let score = 0;
let clickHere = document.getElementById("clickHere");
let showResult = document.getElementById("showResult"); // 额外加的“查看结果”按钮

clickHere.addEventListener("click", () => {
  score++;
});

// 用户点击查看结果时才读取score，这时候点击操作已经完成，能拿到累计的最新值
showResult.addEventListener("click", () => {
  console.log("累计点击分数：", score);
  alert(`你总共点击了${score}次`);
});

对应的HTML和原有样式可以保留，新增按钮即可：

<div id="clickHere">Click here !</div>
<button id="showResult">查看最终分数</button>

#clickHere {
padding: 20px;
background-color: #000000;
color: #ffffff;
font-weight: bold;
text-transform: uppercase;
display: inline-block;
}

方法3：自定义事件实现更新通知（适合多模块场景） #

如果项目里有多个不同的逻辑模块都需要用到score的最新值，不想每次都在点击回调里挨个调用函数，可以在score更新时派发全局自定义事件，所有需要用到值的地方监听事件即可，耦合度更低：

let score = 0;
let clickHere = document.getElementById("clickHere");

clickHere.addEventListener("click", () => {
  score++;
  // 派发全局自定义事件，携带最新的分数值
  window.dispatchEvent(new CustomEvent("scoreChange", {
    detail: { currentScore: score }
  }));
});

// 任意位置需要用最新分数，只要监听这个事件就行
window.addEventListener("scoreChange", (e) => {
  const latestScore = e.detail.currentScore;
  console.log("收到分数更新通知：", latestScore);
  // 在这里写对应业务逻辑
});

注意：不要用定时器轮询的方式反复读取score值，性能差还容易出现时序bug，优先选择上面三种方案。

内容的提问来源于stack exchange，提问作者Marie Hub.