如何将新类实例化操作传入按钮组件，确保仅在点击时执行

问题解决 #

错误原因 #

你当前的写法会把device.createNew函数直接转为字符串拼到HTML里，最终生成的onclick内容是函数的源码定义，点击按钮时只会定义函数不会执行；如果改成device.createNew()，又会在拼接字符串时立即执行函数，不符合点击触发的需求。

推荐方案：使用事件监听（更安全易维护） #

放弃字符串拼接HTML的方式，直接创建DOM元素并绑定点击事件，这样能确保函数仅在点击时执行：

// 创建按钮元素
const btn = document.createElement('button');
btn.textContent = 'new';
// 绑定点击事件：直接传函数引用，不会提前执行
btn.addEventListener('click', device.createNew);
// 将按钮添加到页面指定位置，比如body
document.body.appendChild(btn);

备选方案：如果必须用字符串拼接 #

确保onclick里的代码是调用函数的语句，同时注意引号转义：

// 用单引号包裹onclick内容，避免和外层双引号冲突
const btnHtml = "<button onclick='device.createNew()'>new</button>";
// 之后将btnHtml插入到DOM中

注意：这种内联事件写法存在XSS风险，且不利于代码维护，优先推荐事件监听方案。

额外建议 #

你的cDevice类中使用new作为方法名并不合适——new是JavaScript的关键字，虽然语法上允许，但容易造成混淆，建议改成create、init这类语义化的名称。

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