A pattern for Javascript OOP that I actually use

Apparently a few people were pretty irritated the last time I posted about what you can make Javascript do (+foo instead of foo() for calls) so today I thought I’d post about a pattern that I actually use regularly. Of course, as with any pattern there are good reasons not to use it. Most of all:complexity… for example you may not be able to make your favourite development environment understand it. Speed shouldn’t be an issue though: It adds one entry to the name lookup tree, but that shouldn’t even really be measurable.

When you do OOP Javascript you’ll often want to add a lot of stuff to the prototype of a constructor. Often people use object notation to get around having to type Foo.prototype.bar=… over and over again. Problem is: This replaces the prototype, so if you’re using inheritance it won’t work. You’d overwrite the inherited prototype:

var BaseCtor=function(){};

var FailedInheritanceCtor=function(){};
FailedInheritanceCtor.prototype=new BaseCtor;
FailedInheritanceCtor.prototype={
   foo:0,
   bar:1
};

alert((new FailedInheritanceCtor) instanceof BaseCtor); //false

var WorkingCtor=function(){};
WorkingCtor.prototype=new BaseCtor;
WorkingCtor.prototype.foo=0;
WorkingCtor.prototype.bar=1;

alert((new WorkingCtor) instanceof BaseCtor); //true

So, you need to do assignments. Of course you could use a function to do them, but that’s one more unnecessary and ugly function call. Or you could use a temporary variable to point to the prototype… but unless you can use Javascript 1.7’s “let” statement that would mean contaminating the current scope. You could wrap it into an anonymous function, but that hardly improves readability.

All of this can be avoided by using the poor man’s “let” (or poor browser’s: your choice): with()
With pushes an object into the name lookup tree… the nice thing is that this object can be created right inside that statement

with({hello:"world"})
   alert(hello); //world

And we can do the same stupid trick with the prototype property:

var BaseCtor=function(){};

var WorkingCtor=function(){};
WorkingCtor.prototype=new BaseCtor;
with({_:WorkingCtor.prototype}){
   _.foo=0;
   _.bar=1;
}

or like this if you want it more compact (I never do that though):

var BaseCtor=function(){};

var WorkingCtor=function(){};
with({_:WorkingCtor.prototype=new BaseCtor}){
   _.foo=0;
   _.bar=1;
}

There. simple. I usually combine it with a variable _ inside the methods to get to this, but that may feel wrong to you.

var BaseCtor=function(){
   var _=this;
};

var WorkingCtor=function(argFoo){
   var _=this;

   _.foo=argFoo;
};
WorkingCtor.prototype=new BaseCtor;
with({_:WorkingCtor.prototype}){
   _.foo=0;
   _.bar=function(argFoo){
      var _=this;

      alert(_.foo);
   };
}

(new WorkingCtor(1)).bar(); //1

2 thoughts on “A pattern for Javascript OOP that I actually use

  1. Cool pattern which should also work with “other” browsers. When using mozilla only code I used the following structure so far:

    ChildClass.prototype = {
    __proto__ : new ParentClass(),
    prop : “val

    };

    Thanks
    Daniel

Leave a Reply

Your email address will not be published. Required fields are marked *


*