Question

我已经打开了有关Function.prototype.bind的MDN文档，但我的脚本仍无效。

我希望this引用添加到addEventListener的htmlElement。问题是，为什么我的this引用了对象窗口。

这里是没有绑定的脚本（http://jsbin.com/ejimor/1/edit）：

var handle1 = document.getElementById('handle1'),
    handle2 = document.getElementById('handle2');

function doLogin() {
    alert(this);
}

function enterForm(ev) {
    if ( ev.which === 13 ) {
        doLogin();
    }
}

handle1.addEventListener('click', doLogin, false);
// this alert: [object HTMLButtonElement] this is what i want


handle2.addEventListener('keyup', enterForm, false);
// this alert: [object Window] this is what i do not want

那么，如何解决这个问题呢？

Answer 1

诀窍是，您希望在调用doLogin的上下文中调用enterForm，因为您可以使用call或apply：

function enterForm(ev) {
    if (ev.which === 13) doLogin.call(this);
}

call和apply确保调用它们的函数内的this被设置为传递给它们的第一个参数（因此我们可以调用doLogin.call({x: 1})并获得[object Object]的警报，例如）。

如果您始终希望在doLogin的上下文中调用HTMLButtonElement，则可以使用bind将该函数替换为相同函数的绑定版本：

function doLogin() { alert(this); }
doLogin = doLogin.bind(handle1);

bind创建一个新版本的函数，this永久绑定到传递给它的第一个参数。所以，同样，如果我们这样做：

var newLogin = doLogin.bind({x: 1});

每次调用newLogin时，都会调用this上下文设置为我们的匿名{x: 1}对象（即使我们newLogin.call(12)或newLogin.apply(someObject) ）

javascript：如何在事件上更改“this”范围

1 个答案: