本文详解为何通过 `innerhtml` 设置的 `onclick` 无法访问类实例方法（如 `this.setchange()`），并提供基于事件监听器与词法作用域的现代解决方案。
在使用 ES6 模块和面向对象 JavaScript 开发时，一个常见误区是：试图通过内联 HTML 属性（如 onclick）直接调用类实例的方法。例如，在 render() 中拼接字符串并赋值给 innerHTML：
<input type="button" onclick="this.setChange()" value="Click here">
这段代码看似合理，实则存在两个根本性问题：
this 指向错误：在 onclick 属性中，this 始终指向触发事件的 DOM 元素（即 ），而非 WriteReview 实例。因此 this.setChange() 报错 TypeError: this.setChange is not a function。
作用域隔离：onclick 属性执行的是全局作用域下的 JavaScript 表达式，无法直接访问模块内定义的局部变量或类实例上下文。即使将方法挂载到 window，也违背模块封装原则，且存在命名污染和内存泄漏风险。
✅ 正确做法是：避免内联事件处理，改用 addEventListener + 箭头函数（或显式绑定），以保留类实例的词法作用域。
以下是推荐的 render() 实现方式：
render() {
const button = document.createElement('input');
button.type = 'button';
button.value = 'Click here';
// 使用箭头函数自动绑定 this 到当前 WriteReview 实例
button.addEventListener('click', () => {
this.setChange();
});
this.element.append(button);
}
或者更简洁地使用 Object.assign（如原答案所示）：
render() {
const button = Object.assign(document.createElement('input'), {
type: 'button',
value: 'Click here'
});
button.addEventListener('click', () => this.setChange());
this.element.append(button);
}
⚠️ 注意事项：
- 不要使用 innerHTML += ... 或 element.innerHTML = ... 动态插入含内联事件的 HTML —— 它会销毁已有节点、重置状态，并丢失事件监听器；
- 若需批量渲染多个交互元素，建议统一委托事件（event delegation），但单个组件内直接绑定更清晰安全；
- 确保 script.js 正确导出/导入（如示例中 export class WriteReview 与 import { WriteReview } 匹配），且 HTML 中 <script type="module"> 加载无跨域问题。</script>
最终效果：点击按钮后，setChange() 被正确调用，this.rating 成功更新为 "3"，控制台输出可验证状态变更。这种方式既符合现代 Web 标准，又保障了代码的可维护性与健壮性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
