JavaScript MVC项目中使用bind修改this指向控制器不生效如何解决

问题根源 #

你在Controller构造函数中调用this.view.initialize(this.buttonClick)时，传入事件监听的是未绑定控制器this的原始函数。后续你执行x.buttonClick = x.buttonClick.bind(x)只是修改了x实例的buttonClick属性指向新的绑定后函数，已经注册到按钮点击事件的回调还是原来的未绑定版本，因此触发时this指向按钮元素本身。

解决方法 #

任选其一即可：

方法1：传入回调前提前绑定this #

修改Controller构造函数中调用initialize的代码，传入绑定好控制器this的函数，同时可以删除外部额外的bind语句：

function Controller(text) {
    this.model = new Model(text);
    this.view =  new View;
    this.buttonClick = function(event) {
        // process the button click event
        this.view.textBox.value = this.model.data;
    };
    // 传入时绑定this
    this.view.initialize(this.buttonClick.bind(this));
};

let x = new Controller("Hello World");
// 下面这行可以删掉，不需要再额外绑定
// x.buttonClick = x.buttonClick.bind(x);

方法2：将回调定义为箭头函数 #

箭头函数的this继承自外层作用域（即Controller实例的this），不会被调用方式改变，不需要额外绑定：

function Controller(text) {
    this.model = new Model(text);
    this.view =  new View;
    // 改成箭头函数
    this.buttonClick = (event) => {
        this.view.textBox.value = this.model.data;
    };
    this.view.initialize(this.buttonClick);
};

let x = new Controller("Hello World");

修改后点击按钮即可正常将Model中的Hello World写入输入框。

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