Subclass of a Subclass?

Question

I've been writing a game engine, and I wanted to re-organize my code to make it more modular. Currently, I have a main function called Isometric that accepts the canvas to draw.

var iso = new Isometric('canvas');

So far so good. Next, I had .newMap() to create a new map.

var map = iso.newMap(10,1,10); // Creates 10x1x10 map

However, I want to change that since there might be some confusion with the .map property (since this returns an array called map).

I wanted the syntax to look like this:

iso.Map.create(10,1,10);

So I tried something like this:

function Isometric(id) {
    this.Map = function() {
        this.create = function() {
        }
    }
}

But when I went to access it, I realized that the second level of this still refers to the same first level this. So, I can't create a sub-class of the Map object.

I've looked at a few different methods, but none of them had clear examples and I couldn't get them to work.

Among them, I'm aware that you can use prototype, and Object.create() but I've not gotten much success.

How can I do this?

The other solution I have is to do something like this:

function Isometric('id') {
    this.Map = {
        'create': function() { },
        'load': function() {}
    }
}

and then access it like

iso.Map['create'];

but I don't like that at all. Any clean methods of doing it?

My main interest is an example with the third-level method ..create() inside .map. If you could provide me with documentation related to my question that I have not yet found, that would be nice. But even mozilla docs didn't seem to help.

Answer 1

I think the appropriate thing to do here is to namespace your Map constructor under the Isometric constructor. Here is how you could go about it.

function Isometric(id) {
  this.id = id;
}

Isometric.prototype = {
  constructor: Isometric,

  test: function() {
    return "I'm an instance of Isometric.";
  }
};

Here we do the namespacing and add a create() helper method to the Map constructor to create its instances.

Isometric.Map = function Map(x, y, z) {
  this.x = x;
  this.y = y;
  this.z = z;
}

Isometric.Map.prototype = {
  constructor: Isometric.Map,

  test: function() {
    return "I'm an instance of Isometric.Map.";
  }
};

// Helper method to create `Map` instances
Isometric.Map.create = function create(x, y, z) {
  return new Isometric.Map(x, y, z);
};

Usage:

var iso = new Isometric('id123');
var map = new Isometric.Map(0, 7, 99);
var map2 = Isometric.Map.create(1, 2, 3);

iso.test(); //=> "I'm an instance of Isometric."
map.test(); //=> "I'm an instance of Isometric.Map."
map2.test(); //=> "I'm an instance of Isometric.Map."

Namespaces

It's important to note that the namespacing we just did prevents collisions with the new Map class in ES6 (new JS version) - more about ES6 Maps here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map.

With that said, it's always important to namespace your code under one main object (you could call it app) and only make that namespace available globally.

In your case you could do something like the following example:

;(function(win) {
  // Isometric
  function Isometric(id) {
    this.id = id;
  }

  Isometric.prototype = {
    constructor: Isometric,

    test: function() {
      return "I'm an instance of Isometric.";
    }
  };


  // Map
  function Map(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }

  Map.prototype = {
    constructor: Map,

    test: function() {
      return "I'm an instance of Isometric.Map.";
    }
  };

  // Helper method to create `Map` instances
  Map.create = function create(x, y, z) {
    return new Map(x, y, z);
  };


  // Namespace Map under Isometric
  Isometric.Map = Map;


  // Expose globally
  // --------------------
  win.app = {
    Isometric: Isometric
  };
}(this));

Example:

var nativeMap = new Map();
nativeMap.set('name', 'joe'); //=> {"name" => "joe"}

var myMap = new app.Isometric.Map(33, 7, 99);
myMap.test(); //=> "I'm an instance of Isometric.Map."

// Native map wasn't affected (good)
nativeMap.test(); //=> TypeError: undefined is not a function

Answer 2

I will leave the other answer as accepted because it was more detailed and even told me about my code possibly becoming deprecated as is.

That being said, I want to re-iterate Felix King's solution. I will figure a way of combining both ideas (using namespaces and using Felixs) but here's what the partial solution was.

function Isometric(id) {
    this.Map = function() {
        this.create = function() {
            return 5;
        };
    };
}

That was the set up I had. 5 is just an arbitrary value.

 var iso = new Isometric(); // New instance of Isometric()
 var mapping = new iso.Map(); // Access to Iso's mapping functions
 var map = mapping.create(); // Should return a map array 

 console.log(map); // Prints 5

For anyone following along on this, if you want to see how I end up implementing it, then see my Github project: https://github.com/joshlalonde/IsometricJS

I'll play around with the code in sometime this weekend.

Again, thanks for your help everyone! Good luck to anyone trying to do something similar.