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

Question

我有以下简单的JavaScript"类":

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

当我运行它时,这可以正常工作.运行以下代码给我一个弹出窗口,上面写着"Alice说嗨":

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().

您可以使用例如$.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();
    });
});

在这里工作小提琴.