Question

考虑以下代码：

var SomeObject = function (id) {
    this.id = id;    
};
SomeObject.prototype.Handler = function() { alert(this.id);};

var o = new SomeObject("bla");

$('#someDivId').on('shown.bs.modal', o.Handler);

我期望弹出窗口显示“ bla”，但弹出窗口显示“ someDivId”。

是否可以使用实例方法作为事件处理程序？

我读了Class methods as event handlers in JavaScript?和Using an object's method as an event handler, how do I remove it?，但无法将其抄录为我的情况。

Answer 1

this的上下文取决于谁调用该函数。在这种情况下，它由dom元素调用。

如果您在Handler中使用console.log（this），它将记录dom并且该dom具有id属性，因此您将看到someDivId作为输出

如果要更改上下文，则需要绑定o

var SomeObject = function(id) {
  this.id = id;
};
SomeObject.prototype.Handler = function() {
  alert(this.id);
};

var o = new SomeObject("bla");

$('#someDivId').on('click', o.Handler.bind(o));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someDivId">hello</div>;

注意：此演示中的引导程序事件shown.bs.modal被替换为“点击”。

Answer 2

您没有分配“ o”类型。当然应该是：

var o = new SomeObject("bla");

代替

var o = new ("bla");

Answer 3

您将需要$('#someDivId').on('shown.bs.modal', o.Handler.bind(o));

Answer 4

$('#someDivId').on('shown.bs.modal', o.Handler);

在这种情况下，'this'是$（'＃someDivId'），因为调用的对象是元素。

$('#someDivId').on('shown.bs.modal', function() { o.Handler() });

将调用放在匿名函数中，然后实际调用它，“ this”将成为对象“ o”。

使用对象方法作为事件处理程序

4 个答案: