为什么已定义的radioClicked调用时会报this.radioClicked is not a function错误

你遇到的报错本质是JavaScript函数运行时的this指向偏移问题：

• 给DOM元素绑定的事件回调函数，运行时默认的this指向触发事件的DOM元素本身，而不是你定义的obj对象
• 你在匿名回调里写this.radioClicked时，this实际指向被点击的<input>元素，该元素上没有定义radioClicked方法，因此抛出类型错误

你提到的无参写法没有报错，只是因为你那版radioClicked的实现里没有用到this访问obj的其他属性/方法，如果里面用到了this调用obj下的成员，同样会出现指向错误。

以下三种方案都可以同时满足传参+this指向正确的需求： #

方案1：提前缓存this引用 #

在addEvents作用域内提前保存obj的引用，回调里直接用缓存的变量访问方法：

addEvents: function(){
    const that = this; // 缓存当前obj的引用
    document.getElementById('radioYes').onclick = function() {that.radioClicked(true);};
    document.getElementById('radioNo').onclick = function() {that.radioClicked(false);};
}

方案2：使用箭头函数 #

箭头函数没有自己的this，会继承外层作用域的this指向，addEvents运行时this指向obj，因此回调里的this也会指向obj：

addEvents: function(){
    document.getElementById('radioYes').onclick = () => this.radioClicked(true);
    document.getElementById('radioNo').onclick = () => this.radioClicked(false);
}

方案3：使用bind显式绑定 #

Function.prototype.bind可以直接指定函数运行时的this指向，同时支持预传参数，不需要额外包裹匿名函数：

addEvents: function(){
    // 第一个参数指定this指向为obj，第二个参数是传给radioClicked的入参
    document.getElementById('radioYes').onclick = this.radioClicked.bind(this, true);
    document.getElementById('radioNo').onclick = this.radioClicked.bind(this, false);
}

内容的提问来源于stack exchange，提问作者J.Doe