Question

Hullo! This is my first question!

I am experimenting with the module pattern promoted by Doug Crockford and others. Mostly very happy with it so far, but I am a little unsure about the best way of handling a certain inheritance pattern.

I have it boiled down to a bare bones case using cat and mammal, although my actual intention is to make objects for a tile based game in canvas.

But here is my bare bones ‘animals’ case using a browser alert:

var ZOO = ZOO || {};
//
ZOO.mammal = function () {
   "use strict";
   var voice = "squeak.mp3", // default mammal sound
      utter = function () {
         window.alert(this.voice);
      };
//
   // public interface
   return {
      utter: utter,
      voice: voice
   };
};
//
ZOO.cat = function () {
   "use strict";
   // hook up ancestor
   var thisCat = ZOO.mammal();
   thisCat.voice = "miaw.mp3";
   return thisCat;
};
//
var felix = ZOO.cat();
felix.utter();

What bothers me about this approach is that I have had to make voice a public property so that cat can modify it.

What I really want is something like ‘protected’ visibility (from Java, ActionScript etc.), so that cat can modify voice without anyone with access to felix being able to modify it.

Is there a solution?

Answer 1

You can simulate protected visibility (visible to yourself, and child objects) by passing a blank object to your base “class” to serve as the repository for your protected properties. This will allow you to share properties through your inheritance chain, without making them public.

var ZOO = ZOO || {};

ZOO.mammal = function (protectedInfo) {
   "use strict";
   protectedInfo = protectedInfo || {};
   protectedInfo.voice = "squeak.mp3";

   // public interface
   return {
      utter: function () {
         alert(protectedInfo.voice);
      }
   };
};

ZOO.cat = function () {
   "use strict";

   var protectedInfo = {};
   // hook up ancestor
   var thisCat = ZOO.mammal(protectedInfo);

   protectedInfo.voice = "miaw.mp3";
   return thisCat;
};

Here’s a live demo