当前位置：首页 > 文章列表 > 文章 > 前端 > 动态HTML调用ES6类方法全攻略

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

2026-01-14 08:39:42 0浏览收藏

从现在开始，努力学习吧！本文《动态HTML调用ES6类方法技巧》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

如何在动态渲染的 HTML 元素中正确调用 ES6 类实例方法

使用 `innerHTML` 插入带 `onclick` 的按钮时，无法访问类实例方法（如 `this.setChange()`），根本原因在于内联事件处理器中 `this` 指向 DOM 元素而非类实例，且内联脚本无法访问模块作用域内的局部变量。解决方案是改用 `addEventListener` + 箭头函数保持词法作用域。

在现代 JavaScript（ES6+）模块环境中，直接通过 innerHTML 设置内联事件处理器（如 onclick="this.setChange()"）是一种已被淘汰且不可靠的做法，主要原因有两点：

this 绑定错误：在 HTML 内联事件属性（如 onclick）中，this 始终指向触发事件的 DOM 元素（此处为 <input>），而该元素上并不存在 setChange 方法，因此抛出 TypeError: this.setChange is not a function。
作用域隔离：模块脚本具有私有作用域，WriteReview 实例 inputElement 仅存在于模块执行上下文中，并未暴露到全局 window 对象。而内联事件处理器在全局作用域中求值，无法访问模块内的变量或 this 上下文。

✅ 正确做法是：动态创建元素 → 使用 addEventListener 绑定事件 → 利用箭头函数自动捕获类实例的 this。

以下是优化后的 render() 方法实现：

render() {
  console.log("inside render");
  const button = document.createElement("input");
  button.type = "button";
  button.value = "Click here";

  // ✅ 箭头函数确保 this 指向 WriteReview 实例
  button.addEventListener("click", () => {
    this.setChange();
    console.log("Rating updated to:", this.rating);
  });

  this.element.appendChild(button);
}

? 进阶建议（提升健壮性与可维护性）：

避免重复创建/追加：若需多次调用 render()，建议先清空容器（如 this.element.innerHTML = "" 或 while (this.element.firstChild) this.element.removeChild(this.element.firstChild)）；
使用 button 元素替代 input[type="button"] 语义更清晰；
可封装为可销毁的事件监听器（配合 AbortController 或手动 removeEventListener），防止内存泄漏（尤其在频繁重渲染场景）；
若需传递事件参数（如 event），箭头函数中仍可访问：(e) => { e.preventDefault(); this.setChange(); }。

完整可运行示例（script.js）：

export class WriteReview {
  constructor(element) {
    this.rating = "5";
    this.element = element;
  }

  setChange() {
    this.rating = "3";
  }

  render() {
    const btn = Object.assign(document.createElement("button"), {
      textContent: "Click here",
      type: "button"
    });

    btn.addEventListener("click", () => this.setChange());

    this.element.appendChild(btn);
  }
}

对应 HTML 无需改动，保持模块导入即可：

<div id="placeholder"></div>
<script type="module">
  import { WriteReview } from "./src/script.js";
  const widget = new WriteReview(document.getElementById("placeholder"));
  widget.render();
</script>

总结：永远避免在 innerHTML 中使用内联事件处理器调用类方法；坚持使用 addEventListener + 箭头函数（或显式 bind(this)），这是保障 this 正确性、符合模块化开发规范的标准实践。

今天关于《动态HTML调用ES6类方法全攻略》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！