I've got a JS object that looks like so:
return {
foo: function() {
return this.bar();
},
bar: function() {
return 1;
}
}
Why do I keep getting a TypeError: this.bar is not a function logged in FireBug? What's the proper way to reference the bar() method from foo() in the same object?
So I've posted a fiddle with the whole code here. The return call is actually part of a RequireJS define. Let me know if any further clarification is required.
It depends on how it is called; If for instance theObject.foo is passed as callback to another function (e.g. jQuery(x).on("click", theObject.foo)), the this context will probably be lost.
A way to enforce that bar calls foo is to make a closure. Change the function that returns the object as:
function thatReturnsTheOject() {
var ret = {
foo: function() {
return ret.bar(); // <---- Using `ret` not `this`
},
bar: function() {
return 1;
}
};
return ret;
}
Another way, more complex but may result in a more familiar language usage is this:
function thatReturnsTheOject() {
var ret = {};
ret.foo = (function() {
return this.bar(); // <---- Using `this` again
}).bind(ret); // <---- but note the `bind()`
ret.bar = function() {
return 1;
};
return ret;
}
self in PHP)?
jQuery(x).on("click", theObject.foo), use this in foo() and still reference the correct object?this to mimic the functionality i'm looking for?self instead of ret, so you can use return self.bar();. Still this is only a game of words, not a solution as the one you are asking. See the edit using Function.bind(), but I doubt it is really better...
thisdepends on how you call it.