JS中如何不通过事件触发调用方法且保证this关键字正常工作

• 你写的myCheckboxes[i].doSomething()报错的核心原因是：doSomething是你自定义的全局函数，并不是DOM元素内置的实例方法，直接通过元素调用会触发「方法不存在」的报错。
• 事件绑定能正常运行的原因是：addEventListener绑定的回调函数被触发时，浏览器会自动把回调的this指向绑定事件的DOM元素，所以能正常读取this.checked。

你可以通过Function.call()显式指定函数运行时的this指向，同时建议把代码放在DOMContentLoaded回调里，确保页面元素加载完成再执行，修改后的代码如下：

function doSomething() {
    console.log(this.checked);
}
document.addEventListener('DOMContentLoaded', function() {
    var myCheckboxes = document.querySelectorAll("input[type='checkbox']");
    for (let i = 0; i < myCheckboxes.length; i++) {
        // 用call把this绑定为当前遍历到的checkbox元素
        doSomething.call(myCheckboxes[i]); 
        myCheckboxes[i].addEventListener("change", doSomething);
    }
})

如果你需要多次调用这个函数绑定到对应元素，也可以用Function.bind()预绑定this：

// 预绑定this到对应元素，后续直接调用即可
const boundDoSomething = doSomething.bind(myCheckboxes[i]);
boundDoSomething();

虽然你也可以手动把doSomething挂载到DOM元素实例上再调用，比如myCheckboxes[i].doSomething = doSomething; myCheckboxes[i].doSomething();，但这种方式会污染原生DOM对象，容易和后续其他逻辑、浏览器内置方法冲突，不建议使用。

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