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

我有以下简单的JavaScript“类”：如何从DOM事件调用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/

我在做什么错？

来源

2013-08-01 Jay Sullivan

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

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

在这里工作Fiddle。

来源

2013-08-01 17:10:44 Seth

jQuery将事件处理程序的接收器设置为目标元素，以便您可以方便地执行诸如$(this).hide()之类的操作。

您可以使用例如$.proxy解决它：

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

来源

2013-08-01 17:06:10 Esailija

确实。事件监听器（本地JavaScript和jQuery）在被单击的元素的'context“中执行事件处理程序。实际上与将“Function.prototype.apply”的第一个参数设置为DOM元素一样。请参阅：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply – Swivel

为了详细说明我上面的评论，基本上'context'是'this'设置为。因此，在使用'Function.prototype.apply'方法时，您可以确定'this'变量是用于特定执行的。这可以进一步说明如下：'函数sayHi（）{alert（this.name +“说Hi”;}; sayHi.apply（alice）; sayHi.apply（bob）;' – Swivel

所以，你通过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)); 
});

来源

2013-08-01 17:39:24 towry

在你的代码中， t需要'who'参数 - 这些实例在'SayHi'方法中可以用'this'获得，并返回处理程序。 – Bergi

@Bergi我会仔细检查一下，这个上下文不是这个元素的所有者，事件？ – eggmatters

@eggmatters：我的意思是'var who = this;'而不是将它作为参数传递给'function SayHi（who）' – Bergi

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

回答

相关问题