javascript objects, callback and this keyword

Question

I'm having trouble figuring out how to correctly reference the 'right' 'this' in a jquery ajax callback.

I have a javascript class where I define the callback:

Foo.prototype.onCallback = function(response) {
  // 'this' should refer to an instance of foo in both the following cases
  this.bar(...)    
  this.hello(...)
}

outside of the class I have:

foo1 = new Foo()
myCallback = foo1.onCallback;

$.ajax({
  ...
  success: function(response) {myCallback(response); ... }
});

Right now I believe 'this' within foo1.onCallback is referring to the html element the ajax call is attached to. How do I ensure that 'this' refers to foo1? Is there a better way to do this?

3 revs, 3 users 90% user1106925 · Accepted Answer · 2012-01-10 17:48:22Z

4

You could use the context property of $.ajax:

var foo1 = new Foo();

$.ajax({
  context: foo1,
  success: function(response) { this.onCallback(response); }
});

...which causes this in the callback to reference your Foo object.

edited Jan 10, 2012 at 17:48

community wiki

3 revs, 3 users 90%
user1106925

Sign up to request clarification or add additional context in comments.

2 Comments

user1106925 Over a year ago

Thanks for the edit @Rocket. I totally missed that I grabbed the wrong identifier. :)

gen_Eric Over a year ago

No prob, figured it was just a typo, so I fixed it for ya :-P

Alnitak · Accepted Answer · 2012-01-10 17:20:50Z

2

You can't do that.

You must either write:

$.ajax({
  ...
  success: function(response) { foo1.onCallback(response); ... }
});

or this:

myCallback = foo1.onCallback.bind(foo1);

Note that Function.bind() requires ECMAScript 5.

edited Jan 10, 2012 at 17:20

answered Jan 10, 2012 at 16:58

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:14:19Z

1

Use the following idiom:

myCallback = foo1.onCallback.bind(foo1);

In fact you should take advantage of first-class function support in JavaScript even further:

foo1 = new Foo()

$.ajax({
  ...
  success: foo1.myCallback.bind(foo1)
});

1 Comment

Alnitak Over a year ago

the OP indicated that there were other things to be done after the initial callback was called, so you can't just pass it as the success: parameter.

Doug Chamberlain · Accepted Answer · 2012-01-10 16:58:13Z

-1

You could simply add the statement alert(this); to see the if it is foo1.

answered Jan 10, 2012 at 16:58

Doug Chamberlain

11.4k9 gold badges55 silver badges94 bronze badges

1 Comment

Ruan Mendes Over a year ago

Your alert would output [object Object]

Collectives™ on Stack Overflow

javascript objects, callback and this keyword

4 Answers 4

2 Comments

Comments

See also:

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

See also:

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related