本文讲解为何使用 let 声明的变量在事件回调中修改后无法在全局作用域正确读取，并提供基于作用域原理的可靠解决方案，强调 var 的函数作用域特性及更现代、更安全的替代方案（如闭包、模块化或显式全局挂载）。
本文讲解为何使用 `let` 声明的变量在事件回调中修改后无法在全局作用域正确读取，并提供基于作用域原理的可靠解决方案，强调 `var` 的函数作用域特性及更现代、更安全的替代方案（如闭包、模块化或显式全局挂载）。
你遇到的问题本质是 JavaScript 中块级作用域（let）与函数作用域（var）的行为差异，而非变量“不可修改”。实际上，你已正确声明了全局 chosenRating，且在点击事件中成功赋值——但问题往往出在读取时机与执行顺序上。
❌ 错误认知澄清
“let 是‘作用域变量，所以不能被修改’” —— 这是不准确的。
let chosenRating = 0 在全局作用域声明，它本就是全局绑定的（在浏览器中属于全局对象的词法环境），完全可以被内部函数修改。你能在 console.log 中看到正确值，恰恰证明赋值成功且作用域无阻隔。
真正导致“外部读到仍是 0”的常见原因有：
- 在按钮点击之前就执行了 console.log(chosenRating)；
- 代码被包裹在 IIFE 或模块作用域中，使 chosenRating 实际并未挂载到真正的全局（如 window）；
- 使用了严格模式或 ES 模块（.mjs/type="module"），此时顶层 let 不会自动成为 window 属性。
✅ 正确解决方案（推荐现代写法）
方案 1：确保全局可访问（推荐 ✅）
// 显式挂载到 window 对象（浏览器环境）
window.chosenRating = 0;
for (const button of ratingButtons) { // 注意：用 for...of 替代 for...in（避免原型污染）
button.onclick = function(e) {
window.chosenRating = e.target.innerHTML;
ratingButtons.forEach(btn => btn.classList.remove('selected'));
e.target.classList.add('selected');
};
}
// ✅ 此时任意位置均可安全访问：
console.log(window.chosenRating); // 点击后输出对应 innerHTML方案 2：使用 var（兼容性方案，不推荐新项目使用 ❗）
var chosenRating = 0; // var 具有函数作用域 + 变量提升，顶层声明即全局
for (const button of ratingButtons) {
button.onclick = function(e) {
chosenRating = e.target.innerHTML; // 修改全局绑定
// ...其余逻辑
};
}⚠️ 注意：var 存在变量提升和重复声明不报错等问题，ES6+ 应优先使用 let/const + 显式全局挂载。
方案 3：模块化设计（最佳实践 ?）
若使用模块系统（如 <script type="module">），应避免依赖隐式全局：
// ratings.js
export let chosenRating = 0;
export function setRating(value) {
chosenRating = value;
}
// 在事件中调用：
import { setRating } from './ratings.js';
button.onclick = (e) => {
setRating(e.target.innerHTML);
// ...
};? 调试建议
- 使用 console.log('global:', window.chosenRating) 对比事件内 console.log('inside:', chosenRating)；
- 检查控制台是否报错 ReferenceError（说明变量未声明）或 undefined（说明作用域隔离）；
- 确认脚本加载顺序：确保变量声明早于所有读取操作。
✅ 总结
let 声明的全局变量完全支持跨函数赋值；所谓“无法访问”，多因执行时序、模块封装或作用域误解所致。优先选择 window.chosenRating 显式挂载（浏览器）或模块导出（现代工程），既语义清晰，又规避 var 的历史缺陷，同时为代码可维护性与测试友好性打下基础。
