Question

I just started with creating custom objects in javascript. I want to set this.someObjVar using code below, but something wrong in my approach. Maybe async response uses it’s own scope or thread.

// The code below used like:
someClass = new extfoo.SomeClass();
someClass.loadArrFromFile();
// this will be called far later after async returns
someClass.showSomeObjVar();

extfoo.js
=========
var extfoo = {};

extfoo.SomeClass = function() {
  this.someObjVar = [];
  this.showSomeObjVar = extfoo.showSomeObjVar;
  this.loadArrFromFile = extfoo.loadArrFromFile;
};
// Bad results here
extfoo.showSomeObjVar = function() {
  // results '0'
  console.log('showSomeObjVar: ' + this.someObjVar.length);
};

// Async array population
extfoo.loadArrFromFile = function() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      this.someObjVar = xhr.responseText.split('\r\n')
      // results '23' elements
      console.log("someObjVar length: "+this.someObjVar.length);
    }
  }
  // request code ...
};

Answer 1

Are you certain that this.someObjVar is referencing extfoo?

There’s a chance that the this object in the extfoo.loadArrFromFile function is referencing the function itself (xhr.onreadystatechange), and not the extfoo object:

extfoo.loadArrFromFile = function() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {

      //I'm going to create a new variable for this function called this.someObjVar
      //Cause I don't know about extfoo's.
      this.someObjVar = xhr.responseText.split('\r\n')
      // results '23' elements
      console.log("someObjVar length: "+this.someObjVar.length);

      //Whup, end of the line, I guess I'll just forget about that variable I just made.
    }
  }
  // request code ...
};

There are several ways to fix this, but to test, try changing this in the extfoo.loadArrFromFile function to extfoo.

Here’s how to fix it:

extfoo.loadArrFromFile = function() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {

      //OOOH you mean that object
      extfoo.someObjVar = xhr.responseText.split('\r\n')
      // results '23' elements
      console.log("someObjVar length: "+extfoo.someObjVar.length);

    }
  }
  // request code ...
};

One last thing… is extfoo.SomeClass.someObjVar supposed to be different from extfoo.someObjVar? This code will work if that’s the case, but otherwise, you’ll want to include a SomeClass in between each reference.