模板字面量创建元素触发onChange时出现Uncaught TypeError: Not a Function问题

问题根源 #

1. 内联onchange='customClass.customMethod()'中的customClass是全局作用域变量，但你在main.js里用let声明的实例属于模块作用域，全局环境找不到这个变量，导致调用失败。
2. 如果改用this.customMethod()，这里的this指向的是触发事件的<input>元素本身，而非CustomClass的实例，元素上不存在customMethod方法，自然报错。

推荐解决方案（方法一：用DOM API创建元素并绑定事件） #

放弃模板字符串生成HTML的方式，直接用原生DOM API创建元素，通过addEventListener绑定事件，能确保this指向类实例：

customClass.js

export class CustomClass{
     createCheckBox(){
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        // 用箭头函数绑定类实例的this
        checkbox.addEventListener('change', () => this.customMethod());
        // 也可以用bind：checkbox.addEventListener('change', this.customMethod.bind(this));
        return checkbox;
     }
     customMethod(){
        // 你的功能代码
        console.log('自定义方法执行');
     }
}

main.js

import {CustomClass} from './customClass.js';
const customClass = new CustomClass();
const checkbox = customClass.createCheckBox();
// 将元素添加到页面DOM中
document.body.appendChild(checkbox);

备选方案（方法二：事件委托，适合必须用HTML字符串场景） #

如果一定要用模板字符串生成HTML，可以通过事件委托实现，避免内联事件的作用域问题：

customClass.js

export class CustomClass{
     constructor() {
         // 构造函数中绑定事件委托，监听目标元素
         document.body.addEventListener('change', (e) => {
             if (e.target.dataset.customCheckbox === '1') {
                 this.customMethod();
             }
         });
     }
     createCheckBox(){
        return `<input type="checkbox" data-custom-checkbox="1">`;
     }
     customMethod(){
        console.log('自定义方法执行');
     }
}

main.js

import {CustomClass} from './customClass.js';
const customClass = new CustomClass();
const checkboxHtml = customClass.createCheckBox();
// 将HTML字符串插入页面
document.body.innerHTML += checkboxHtml;

不推荐方案（全局挂载实例） #

如果临时测试需要，可以把实例挂载到全局作用域，但会污染全局环境，不建议在生产环境使用：

main.js

import {CustomClass} from './customClass.js';
// 将实例挂载到window全局对象
window.customClass = new CustomClass();
const checkboxHtml = customClass.createCheckBox();
document.body.innerHTML += checkboxHtml;

customClass.js

export class CustomClass{
     createCheckBox(){
        return `<input type="checkbox" onchange='customClass.customMethod()'>`;
     }
     customMethod(){
        console.log('自定义方法执行');
     }
}

内容的提问来源于stack exchange，提问作者Luke