javascript - 如何从 DOM 事件中调用 JavaScript 类实例方法？

Question

我有以下简单的 JavaScript“类”：

function Person(params) 
{
    this.name = params.name;
}
Person.prototype.SayHi = function()
{
    alert(this.name + " says hi");
}

当我运行它时，这按预期工作。运行以下代码会给我一个弹出窗口，上面写着“爱丽丝说嗨”：

var alice = new Person({name:"Alice"});
alice.SayHi();

但是当我尝试将它分配给按钮事件时，它不起作用：

$("#AliceOnClick").on("click", alice.SayHi);
$("#BobOnClick").on("click", bob.SayHi);

似乎SayHi调用了该​​函数，但该name字段为空。

最小的工作示例：

http://jsfiddle.net/AKHsc/1/

我究竟做错了什么？

Answer 1

jQuery 将事件处理程序的接收者设置为目标元素，以便您可以方便地执行类似$(this).hide().

您可以使用 eg$.proxy来解决它：

$(function(){
    $("#AliceOnClick").on("click", $.proxy(alice.SayHi, alice));
    $("#BobOnClick").on("click", $.proxy(bob.SayHi, bob));
});

Answer 2

只需在匿名函数中运行它即可调用它。由于您在对象上调用方法，因此需要括号。

$(function(){
    $("#AliceOnClick").on("click", function() {
        alice.SayHi();
    });
    $("#BobOnClick").on("click", function() {
        bob.SayHi();
    });
});

在这里工作小提琴。

Answer 3

因此，您调用该函数而不通过 调用它instance，并且 javascript 不维护instance object和 函数之间的链接，只需将实例对象传递给函数。

function Person(params) 
{
    this.name = params.name;
}
// version 1
Person.prototype.SayHi = function(who)
{
    return function() {
        alert(who.name + " says hi");
    }
}
// version 2, with `bind` method supported
Person.prototype.SayHi = function () {
    return function () {
        alert(this.name + " says hi");
    }.bind(this);
}
// version 3
Person.prototype.SayHi = function () {
    var who = this;
    return function () {
        alert(who.name + " says hi");
    }
}

alice = new Person({
    name: "Alice"
});
bob = new Person({
    name: "Bob"
});

$(function(){
    $("#AliceOnClick").on("click", alice.SayHi()));
    $("#BobOnClick").on("click", bob.SayHi());
    // $("#AliceOnClick").on("click", alice.SayHi(alice));
    //$("#BobOnClick").on("click", bob.SayHi(bob));
});