javascript Javascript从事件处理程序中获取对父对象/类的引用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10656119/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript get reference to parent object/class from event handler
提问by Joel
I have a class (or function-containing object; I've heard that there is no such thing as a Javascript class) called Foo, with an event handler that is attached to a click event. When the event handler is called, I want to modify a property of my class Foo. Normally, I would use the thiskeyword, but in the event handler, the thisreference is set to the reference to the html element. Here is my code:
我有一个名为 Foo 的类（或包含函数的对象；我听说没有 Javascript 类这样的东西），它带有一个附加到点击事件的事件处理程序。当事件处理程序被调用时，我想修改我的类 Foo 的一个属性。通常，我会使用this关键字，但在事件处理程序中，this引用设置为对 html 元素的引用。这是我的代码：
function Foo() {
this.num=0;
$('element').click(this.eventHandler);// jQuery to attach an onclick event to my element.
this.eventHandler=function() {
this.num++;// This doesn't work.
// Normally, "this" would refer to my instance of Foo,
// but as an event handler, "this" refers to the html element.
}
}
So my question is: how do I get a reference to my instance of Foo into my event handler so that I can modify its properties (like num)?
所以我的问题是：如何将我的 Foo 实例引用到我的事件处理程序中，以便我可以修改其属性（如num）？
回答by Fabrizio Calderan
function Foo() {
var _self = this;
this.num=0;
$('element').click(this.eventHandler);// jQuery to attach an onclick event to my element.
this.eventHandler=function() {
_self.num++;
}
}
use a reference _self = thisdefined in the outer scope
使用_self = this在外部作用域中定义的引用
回答by ThiefMaster
You need to bind the function's context; otherwise thiswill be the global object:
您需要绑定函数的上下文；否则this将是全局对象：
$('element').click($.proxy(this.eventHandler, this));
In a modern browser you can also use Function.prototype.bind:
在现代浏览器中，您还可以使用Function.prototype.bind：
$('element').click(this.eventHandler.bind(this))
回答by Swapnil Bhamat
function Foo() {
this.num=0;
$(document).on('click', 'element', this, this.eventHandler);
this.eventHandler=function(e) {
var _this = e.data;
_this.num++;
}
}
1) Use JQuery on() method to attach event listeners. 2) Use a reference _this for accessing parent class.
1) 使用 JQuery on() 方法附加事件监听器。2) 使用引用 _this 来访问父类。
回答by alex
You can store a reference to thisin the constructor that you can access in your event handler.
您可以this在构造函数中存储一个引用，您可以在事件处理程序中访问该引用。
function Foo() {
this.num=0;
$('element').click(this.eventHandler);// jQuery to attach an onclick event to my element.
var that = this;
this.eventHandler=function() {
that.num++;// This doesn't work.
}
}
