How can you use ajax within an object to populate the object's instance variables?

Question

I have multiple objects in a hierarchy which have common properties and methods inherited from the superclass, and object-specific properties and methods in the subclasses. I'm still new to OOP javascript, so there is probably a much better approach to this. I'm using jQuery for the AJAX, but not sure if that makes any difference.

function Obj(input) {
    this.in = input;
    this.out = {
        content: this.in,
        category: {},
        owner: utils.getValidUser(),
        state: 0,
        meta: {}
    };
    this.process = function() {
       console.log("No Process Defined");
    }
}

function MovieObj(input) {
    this.inheritFrom = Obj;
    this.inheritFrom();
    this.out.type = "movie";
}

function ActionMovie(input) {
        this.inheritFrom = MovieObj;
        this.inheritFrom();
        this.out.genre = "action";
        this.process = function() {
            console.log("movie search");
            $.getJSON("/api/search/"+ escape(this.out.content),
              function(data) {
                /* 
                   I want to modify the object properties according to
                   what comes back from the ajax call.
                */
            });
        }
}

Answer 1

Aw, kinda strange approach to Object Oriented JavaScript :)

As I get you want implement model you're using in other languages you familiar with to construct your object. I'm about this.inheritFrom . In JS there aren't classes, objects are inheriting directly from objects. One way (there are a lot of discussions in the web) is to do it with new keyword, as

var MovieObj = new Obj(input);
MovieObj.out.type = "movie";

For all pleasure you need to get familiar with prototype inheritance, and your code will look like

function Obj(input){
    /* some stuff here */
};

function MovieObj(){};
MovieObj.prototype = new Obj();
MovieObj.prototype.constructor = MovieObj();
MovieObj.protorype.out.type = 'movie';

var actionMovie = new MovieObj();
/* do some stuff here with your final object actionMovie */

Hope it'll help you understand difference between oo js and other oo languages. Feel free to ask in comments if anything not clear (sorry for my English).

Answer 2

Here is a prototypical approach to my earlier code, AND a simple reference to the calling object, which solves both the inheritance issues and the scope issues.

// Define Superclass
function Obj(input) {
    this.content = input;
    this.type = "object";
    this.owner = utils.getValidUser();
    this.state = 0;
}
Obj.prototype.process = function() {
       console.log("No Process Defined");
};


// Define Movie Subclass
function MovieObj(input) {
    Obj.call(this, input); 
    this.type = "movie";
}
MovieObj.prototype = new Obj();

// Define ActionMovie as subclass of Movie and apply new process method.
function ActionMovie(input) {
    MovieObj.call(this, input);
    this.genre = "action";
}
ActionMovie.prototype = new MovieObj();
ActionMovie.prototype.process = function() {
            var _obj = this;
            $.getJSON("/api/search/"+ escape(this.content),
              function(data) {
                /* 
                   I want to modify the object properties according to
                   what comes back from the ajax call.
                */
                _obj.meta.title data.title;
            });
        }
}

This is now actually working, but there are some caveats. As written, the constructors for the superclass are called everytime a new object is defined, so a lot of unnecessary calls are made.

This code is based on information contained in the following link, which also describes a workaround that is Mozilla specific: http://www.spheredev.org/wiki/Prototypes_in_JavaScript