asked on

Using 'this' on Javascript

Hi,

If I run the following code, I get
READYSTATE 4
200
Some Plain Text Data

However if I don't use 'this' on 'this.status' and 'this.status', the result will be
READYSTATE 4
it doesn't display the state and responseText. But it displays xhr.readyState even though we dont use 'this' like this.xhr.readyState. (actually I am getting an error if I use 'this' here. Uncaught TypeError: Cannot read property 'readyState' of undefined
at XMLHttpRequest.xhr.onload)

Can you please explain why do I need 'this' in some places and don't in some other places?

document.getElementById("button").addEventListener("click", loadData);

function loadData() {
  // Create an XHR object
  const xhr = new XMLHttpRequest();

  // Open 
  xhr.open('GET', 'data.txt', true);
  xhr.onload = function () {
    console.log('READYSTATE', xhr.readyState);
    console.log(this.status);
    if (this.status === 200) {
      console.log(this.responseText);
    }
  }
  xhr.send();
}

Open in new window

SOLUTION

Rikin Shah

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

a some point (at different time of the process), this represent something different

if at 0:001s this is a cat
and at 0:003s this is a bird

at 0:001 you can't use this.wing but you can use this.wing at 0:003s

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Isabell

ASKER

Thank you all for the answers.

@Rikin Shah
oh I see. Since readyState, status, responseText methods are all belong XMLHttpRequest object, we should specify xhr to use it, right?
I verified that using 'xhr' instead of 'this' works here.

Then how/why 'this' refer 'xhr' here?
If I don't specify 'this', will JS try to find these methods in a global scope? like Window.readyState?

@Julian Hansen
Thanks for your very detailed explanation. I was actually doing the same thing as you did on the second part of the code.(using 'xhr' instead of 'this')
So what's the best practice among your answers?

also you mentioned "In an event handler this refers to the object the handler was defined on - in your case this is the xhr."
But isn't this handler(loadData) was defined on the global scope(Window) since it's not attached to any object?

Julian Hansen

Best practice is to dereference this whenever you can to avoid the inevitable issues that come up with scoping.

As soon as you enter a block where this is active in the local scope do this

var vm = this;

Open in new window

And then use vm (or whatever local variable you want to use).

This allows for clear referencing of objects in nested callbacks / objects

Julian Hansen

If I don't specify 'this', will JS try to find these methods in a global scope? like Window.readyState?

Firstly, readyState is a property not a method.
JavaScript will throw an error if you just refer to readyState (unless there is a variable in scope called readyState)

So without this / xhr in front you just get an error - JavaScript doesn't try to find anything - it looks on the specified object and if the method / property does not exist there it throws an error.

CEHJ

Posting JavaScript questions in the Java TA is not appropriate, and might make your question less likely to be answered. http://technojeeves.com/joomla/index.php/free/127-javascript-is-not-java