1

I have snippet of js code like this

Customer.prototype.parseAddress = function(data){
   this.address = data.address;
}
Customer.prototype.loadAddress = function(){
   ...
}

I need to implement the loadAddress function.

Can someone explain me why this snippet of code is correct

var that = this;
$.get('data.xml', function(data){
    that.parseAddress(data);
});

and following is not correct

$.get('data.xml', function(data){
    this.parseAddress(data);
});
Toby Allen
  • 10,562
  • 10
  • 70
  • 120
user2783193
  • 974
  • 1
  • 11
  • 36
  • It is hard to tell because there isn't a big enough picture. 'this' refers to the encapsulating object. Depending on where you call it (or assign it to a variable) it will refer to whichever object it is called within. – OscillatingMonkey May 27 '15 at 21:00
  • 1
    `this` inside success `$.get()` callback is referring to jqXHR object – A. Wolff May 27 '15 at 21:02
  • depending on where this is in the code it changes. It is the execution context. Inside the function, the execution context is different than before – AmmarCSE May 27 '15 at 21:03
  • This is too complicated for SO you need to read up on scope in javascript. – Toby Allen May 27 '15 at 21:03

3 Answers3

1

The thing is that when you call a function you need to pass the context of the function, otherwise, the context will be the new one specified by the query. You should check the following concepts (call, apply and bind).

You can write:

 $.get('data.xml', function(data){
   this.parseAddress(data);
}.bind(this));

A good link reference to study about it is: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

Pedro Augusto Freitas de Souza
  • 861
  • 7
  • 17
1

In Javascript, this is a special contextual keyword that changes depending on where you use it.

By doing that = this; you're saving what this means, so you don't need to worry about whether or not this means what you thought it did.

my_func = function() {
  var that = this;
  console.log(this); //prints one thing

  my_inner_func = function()
    {
      console.log(this); //prints another
      console.log(that); //prints what the first log printed
    }
  my_inner_func();
}
TankorSmash
  • 11,146
  • 5
  • 55
  • 96
  • Can you very briefly explain what `this` is itself? – AmmarCSE May 27 '15 at 21:15
  • Checkout https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this. It's basically `self.` in Python, but changes what `self` points to depending on how deeply its nested. – TankorSmash May 27 '15 at 21:19
1

The reason for this is because this is contextual and can change within the callback.

What I mean by the statement is 

this.parseAddress

parseAddress has been defined on this. However when the callback function is called, this may not be the object you expect, jQuery does this quite a bit. You therefore can't access other properties of the original this from within the callback.

The simplest way to handle it is to keep a reference to the original this by storing it in that. Now you can always refer back to the original object and access more properties due to original reference in that being accessible within the scope of the jQuery callback.

Ian
  • 30,720
  • 20
  • 100
  • 179