0

我打开了有关 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

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

4

1 回答 1

3

诀窍是你想在被调用doLogin的上下文中enterForm调用 - 为此你可以使用callor 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)or newLogin.apply(someObject)）

于 2013-08-14T05:13:13.477 回答