Question

I started to learn JavaScript, after years of using it without really knowing what’s going on, i decided it is time to do something about that. Additionally, I work on a project where JavaScripts can be used to script the Application.

So, enough of all the yada-yada, my problem relates to prototypal inheritance, I think I know how it works by now, but there might be issues. The basic Idea is that every object (well, not every object – yeah ;-)) has a prototype where all requests are delegated to if the actual object cannot handle it until the end of the prototype chain has been reached (the prototype of an object can have a prototype too, right?).

In my Application, massive filtering is going to happen and I want to give the users (which are not very technical, It should be as easy as possible.) a way to chain simple filter commands narrowing the result set with each additional call. What do I mean? Smth. like this:

zoo.getAnimals().getAnimalsWithFurColor("red").getMammals()

zoo is always in scope and is an object containing animals and additional properties for the zoo. So, I would have an object like this (lets call it Container) to be returned by all method calls in the example:

 {
   data: [harryTheElephant, sallyThePenguin, timTheWoodpecker],
   someFilterMethod: function() {
        return new Container(data.filter(function(animal) {
            return animal.someProperty == someValue;
        });
   }
 }

So far, so good. But i want the Zoo to be a container too. This is where my real question comes into play: As the zoo has to do some very expensive stuff to retrieve the starting set of animals, i want to lazy-load them. When the zoo gets an getAnimals()
request the data is fetched.

My Idea was to set the prototype of the Zoo to be a Container which obtains its data from the zoo. But I cannot find a way to access the getAnimals() method from the zoo from the prototype (the container). I tried it with this but the method cannot be found.

Any Ideas how to write code that does what i want to do? Please note that i’m not in a Browser environment, i embed JavaScript (1.7) in my Application.

Thanks!

Answer 1

It doesn’t make much sense for an object to access the properties of something that (prototypally) inherits from it. E.g., if a Cat has a meow() method, it would be weird for Mammal to reference meow(). Similarly, it would be weird for Container to reference getAnimals(), if Zoo is the one deriving from Container.

My suggestion, to accomplish your lazy-loading, would be to pass an accessor function that returns an array into the Container constructor, instead of passing an array directly. This might look something like:

function Container(getAnimals) {
    this.someFilterMethod = function () {
        return new Container(function () {
            return getAnimals().filter(function (animal) {
                 return animal.someProperty === someValue;
            });
        });
    };

    this.get = getAnimals;
}

function makeZoo(animals) {
    var zoo = Object.create(new Container(function () { return animals; }));
    zoo.customZooMethod = function () { /* ... */ };

    return zoo;
}

var aZoo = makeZoo([harryTheElephant, sallyThePenguin, timTheWoodpecker]);
var filteredAnimals = aZoo.someFilterMethod().get();