动态HTML调用ES6类方法全攻略

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《动态 HTML 中调用 ES6 类方法技巧》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

本文详解为何通过 `innerHTML` 设置的 `onclick` 无法访问类实例方法（如 `this.setChange()`），并提供基于事件监听器与词法作用域的现代解决方案。

在使用 ES6 模块和面向对象 JavaScript 开发时，一个常见误区是：试图通过内联 HTML 属性（如 onclick）直接调用类实例的方法。例如，在 render() 中拼接字符串并赋值给 innerHTML：

<input type="button" onclick="this.setChange()" value="Click here" />

这段代码看似合理，实则存在两个根本性问题：

1. this 指向错误：在 onclick 属性中，this 始终指向触发事件的 DOM 元素（即 <input>），而非 WriteReview 实例。因此 this.setChange() 报错 TypeError: this.setChange is not a function。

2. 作用域隔离：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 中