JavaScript scope shifting - Help me understand

Question

I am creating a program which will, ultimately, create thousands of small objects (ideally about 60,000 of them), each containing specific information. It will be loading each object from a small JSON file which has already been created and is sitting within a directory tree structure on the server.

How it finds the files is immaterial to this question (let's say it's outside the "scope" of it) however I'm trying to understand how this works by stepping through the program.

Assume that I have simplified this somewhat as well; as I know many of you may catch that I seem to be adding an unnecessary layer between my request to load the data and actually loading it (which obviously I could via jQuery's $.getJSON().done()), however since there's the file system structure to take into account, the program also needs to handle that part as well.

Data = function() {

    var VERSION = 1.1;

    if (this.constructor === Data) {

        throw new Error("Objects may not be directly instantiated from an abstract class.");
    }
}

// Loads a file with the path from the root set in config.json

Data.prototype.loadData = function(treePath,callback) {

    // does data loading stuff here and proceeds through, eventually getting to this line: 
            callback(req,loadedData);

}

Now, I've got an abstraction layer in there - I don't want the Data object to be created in and of itself, which is why it throws and error should someone call "new Data();" That's intentional.

I will then have two objects which inherit Data; both with methods which deal with the loaded data in different ways. Since the file tree structure is the same for both, however, it makes sense to create an abstract object to inherit from. (OR, as a sub-question, is this a good argument for an object literal for the Data object?)

Now, I call the loadData from FOO and then Data will call the callack, which is inside FOO. I have tried declaring this as FOO.prototype.pareseData, and FOO.parseData, and it makes no difference.

FOO.parseData = function(req,path) { 

    // Parse the data and deal with it as needed.
}

Stepping through, when I call FOO from the main program and tell it to start loading the data, I can watch the "this" value. Initially, this = FOO, as expected; and this remains FOO until Data calls the callback function.

Once the code hits FOO.parseData, this changes from FOO to "window".

And I have no idea why...?

Answer 1

Thats because in javascript, "this" is a reference to the current scope, so, If you call a function/callback outside the original scope, most probably that "this" will be the "window", since "window" is the one that is calling the function/callback.

A workaround in order to maintain "this" to the scope you want to, you have to bind your functions to that given scope when you are declaring it:

function Foo() {
    this.bar();
}.bind(this); //-> Here you bind Foo to the current scope, so inside Foo, this will be always the scope where it was bound.

Answer 2

I strongly recommend you to read this article.

http://ryanmorr.com/understanding-scope-and-context-in-javascript/

Your problem is explained in 3rd paragraph - What is “this” Context:

"Context is most often determined by how a function is invoked. When a function is called as a method of an object, this is set to the object the method is called on:

var obj = {
    foo: function(){
        alert(this === obj);    
    }
};
obj.foo(); // true

The same principle applies when invoking a function with the new operator to create an instance of an object. When invoked in this manner, the value of this within the scope of the function will be set to the newly created instance:

function foo(){
    alert(this);
}
foo() // window
new foo() // foo

When called as an unbound function, this will default to the global context or window object in the browser. However, if the function is executed in strict mode, the context will default to undefined."