JavaScript object call one method from another

Question

Given the following object literal how do I call c from within b?

Update 1 - missed one thing I use JQuery load, which changes the context:

var a = {
 b: function (e) {
 $o.load(path, function (e) { // need to call c from here });
 },
 c: function (e) { 
 }
};

Answer 1

You should be able to do a.c() inside .b:

var a = {
 b: function(e) {
 a.c();
 },
 c: function(e) {}
};
a.b(); // calls c

Also, this will be bound to the a object which will allow you to access its properties using this.property:

b: function(e) {
 this.c();
},

• user1514042: Sorry mate I missed one detail - I use JQuery load call, so I need to proxy the loaded event handler somehow...
• Flambino: note that this === a is only a sure thing if you call a.b() -directly. Assign the b function to another obj, or use it as a jQuery event handler, and this will change.

Answer 2

Try this:-

var a = {
b: function(e) {
 a.c();
},
c: function(e) {}
};
a.b(); 

Answer 3

var a = {
 b: function (e) {
 a.c();
 },
 c: function (e) {
 // magic goes here
 }
};

a will be a closure so it's accessible in the functions (that is, a is defined in an wide, outer scope, which the narrower, inner scopes in each function inherit). Calling context is irrelevant; closures are formed when and where the functions are defined, so inside b, object a will always stay the same (unlike this, which can change).

Answer 4

From the method b you may call c using this.c as long as they are on the same object. However for the function expression being passed to $o I would suggest you bind the this pointer of b to it. Thus you do:

var a = {
 b: function (e) {
 $o.load(path, function (e) {
 this.c();
 }.bind(this));
 },
 c: function (e) {
 }
};

Edit: The way you're creating and using this object is fragile. The this pointer may point to anything, such as when you unbind the methods or call it with a different context. Even using a.c isn't foolproof as other code may change a and when the method b is called a will point to something else.

I would do something like this:

var a = function (a) {
 a.b = function (e) {
 $o.load(path, function (e) {
 a.c();
 });
 };
 a.c = function (e) {
 };
 return a;
}({});

This code can not be tampered with and allows you to create private variables and closures.

• user1514042: Perhaps I'm missing something but bind() doesn't change this of my loaded handler. I tried passing in a few different things including just a string but my this is always a html object.
• Aadit M Shah: Perhaps you could show me your actual code. It works for me: jsfiddle.net/3bkzD
• user1514042: I've found something more elegant than your solution being ,ドルproxy. see my answer.
• Aadit M Shah: JQuery proxy was used before browsers started natively supporting bind. I wouldn't prefer it over bind for any purpose. Native bind is approximately 90% faster than jquery.proxy.