Is there any issue doing the following....
var myObject = {
name: "Johnny",
init: function() {
$("body").mousemove(this.setStatus);
},
setStatus: function(ev) {
$("body").append("<div>Mouse Move by: " + myObject.name + "</div>");
}
};
myObject.init();
Is this the best way of referencing an object's property when a class is created in this way (i.e. calling myObject.name from the setStatus function)?
4 Answers 4
It looks like you're aware that when this.setStatus is triggered the context variable this will refer to the element that received the event (i.e. your <body>) rather than to myObject.
However you really shouldn't refer to myObject within the object itself - an object should have no knowledge of what it's being called outside of itself.
To resolve that you can pass this as an additional parameter to .mouseMove thus:
$("body").mousemove(this, this.setStatus);
and then within your event handler you can retrieve your current object reference via the event's data field:
setStatus: function(ev) {
var self = ev.data;
$("body").append("<div>Mouse Move by: " + self.name + "</div>");
}
4 Comments
var tmp = myObject; myObject = null and your code would break. The change I've suggested isolates the internals of your implementation from the external references by which your object is known and would allow the code to keep working.myObject you'd no longer have to change any of the internal implementation.This is perfectly fine. If setStatus isn't used anywhere else, you can move it to an anonymous function and pass it to mousemove.
Comments
You need to ensure that the this is still available. When passing the function to an event handler, this will point to the related DOM node.
Since you are using jQuery, you can use $.proxy() to bind this inside the function to something else:
$("body").mousemove($.proxy(this.setStatus, this));
However, it would be cleaner to make the original this available by other means:
var myObject = {
name: "Johnny",
init: function() {
var self = this;
$("body").mousemove(function(ev) {
self.setStatus.call(this, ev, self);
});
},
setStatus: function(ev, self) {
$("body").append("<div>Mouse Move by: " + self.name + "</div>");
}
};
1 Comment
this in an event handler refers to the element that received the event.That way is fine. Another way of doing it would be to just pass an anonymous function to the mousemove:
var myObject = {
name: "Johnny",
init: function() {
var thisObject = this;
$("body").mousemove(function() {
$("body").append("<div>Mouse Move by: " + thisObject.name + "</div>");
});
}
};
myObject.init();
See fiddle