[英]Calling function from an object with event listener
I have a view model something like this:我有一个像这样的视图模型:
CANVAS = getElementById...
RemixView = function(attrs) {
this.model = attrs.model;
this.dragging = false;
this.init();
};
RemixView.prototype = {
init: function() {
CANVAS.addEventListener("click", this.handleClick);
},
handleClick: function(ev) {
var obj = this.getHoveredObject(ev);
},
getHoveredObject: function(ev) {}
...
...
}
rv = new RemixView()
the problem is my when clickHandler event fired, this object is being equal to CANVAS object, not RemixView .问题是当 clickHandler 事件被触发时,这个对象等于CANVAS对象,而不是 RemixView 。 So I get an error that says:
所以我收到一条错误消息:
this.getHoveredObject is not a function
this.getHoveredObject 不是函数
What is correct approach at that stuation?在那种情况下正确的方法是什么?
The usual approach is to use a simple closure for the callback and capture the appropriate value of this
in a local variable that the closure can reference:通常的方法是为回调使用一个简单的闭包,并在闭包可以引用的局部变量中捕获
this
的适当值:
RemixView.prototype = {
init: function(this) {
var _this = this;
CANVAS.addEventListener("click", function(ev) {
return _this.handleClick(ev);
});
},
//...
};
You could also use Function.prototype.bind
to make a bound function (as user123444555621 does):您还可以使用
Function.prototype.bind
来创建绑定函数(如user123444555621所做的那样):
RemixView.prototype = {
init: function(this) {
CANVAS.addEventListener("click", this.handleClick.bind(this));
},
//...
};
Or, if you want to use ES6, you could use an arrow function :或者,如果你想使用 ES6,你可以使用箭头函数:
RemixView.prototype = {
init: function(this) {
CANVAS.addEventListener("click", ev => this.handleClick(ev));
},
//...
};
Make prototype
a function.使
prototype
成为一个函数。
RemixView.prototype = function () {
init: function() {
CANVAS.addEventListener("click", this.handleClick);
},
handleClick: function(ev) {
var obj = this.getHoveredObject(ev);
} ///...
//...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.