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

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