Question

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

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();
    });
});

在这里工作Fiddle。

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));
});

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

3 个答案: