How to "properly" create a custom object in JavaScript?

Question

I wonder about what the best way is to create an JavaScript object that has properties and methods.

I have seen examples where the person used var self = this and then uses self. in all functions to make sure the scope is always correct.

Then I have seen examples of using .prototype to add properties, while others do it inline.

Can someone give me a proper example of a JavaScript object with some properties and methods?

Answer 1

There are two models for implementing classes and instances in JavaScript: the prototyping way, and the closure way. Both have advantages and drawbacks, and there are plenty of extended variations. Many programmers and libraries have different approaches and class-handling utility functions to paper over some of the uglier parts of the language.

The result is that in mixed company you will have a mishmash of metaclasses, all behaving slightly differently. What's worse, most JavaScript tutorial material is terrible and serves up some kind of in-between compromise to cover all bases, leaving you very confused. (Probably the author is also confused. JavaScript's object model is very different to most programming languages, and in many places straight-up badly designed.)

Let's start with the prototype way. This is the most JavaScript-native you can get: there is a minimum of overhead code and instanceof will work with instances of this kind of object.

function Shape(x, y) {     this.x= x;     this.y= y; } 

We can add methods to the instance created by new Shape by writing them to the prototype lookup of this constructor function:

Shape.prototype.toString= function() {     return 'Shape at '+this.x+', '+this.y; }; 

Now to subclass it, in as much as you can call what JavaScript does subclassing. We do that by completely replacing that weird magic prototype property:

function Circle(x, y, r) {     Shape.call(this, x, y); // invoke the base class's constructor function to take co-ords     this.r= r; } Circle.prototype= new Shape(); 

before adding methods to it:

Circle.prototype.toString= function() {     return 'Circular '+Shape.prototype.toString.call(this)+' with radius '+this.r; } 

This example will work and you will see code like it in many tutorials. But man, that new Shape() is ugly: we're instantiating the base class even though no actual Shape is to be created. It happens to work in this simple case because JavaScript is so sloppy: it allows zero arguments to be passed in, in which case x and y become undefined and are assigned to the prototype's this.x and this.y. If the constructor function were doing anything more complicated, it would fall flat on its face.

So what we need to do is find a way to create a prototype object which contains the methods and other members we want at a class level, without calling the base class's constructor function. To do this we are going to have to start writing helper code. This is the simplest approach I know of:

function subclassOf(base) {     _subclassOf.prototype= base.prototype;     return new _subclassOf(); } function _subclassOf() {}; 

This transfers the base class's members in its prototype to a new constructor function which does nothing, then uses that constructor. Now we can write simply:

function Circle(x, y, r) {     Shape.call(this, x, y);     this.r= r; } Circle.prototype= subclassOf(Shape); 

instead of the new Shape() wrongness. We now have an acceptable set of primitives to built classes.

There are a few refinements and extensions we can consider under this model. For example here is a syntactical-sugar version:

Function.prototype.subclass= function(base) {     var c= Function.prototype.subclass.nonconstructor;     c.prototype= base.prototype;     this.prototype= new c(); }; Function.prototype.subclass.nonconstructor= function() {};  ...  function Circle(x, y, r) {     Shape.call(this, x, y);     this.r= r; } Circle.subclass(Shape); 

Either version has the drawback that the constructor function cannot be inherited, as it is in many languages. So even if your subclass adds nothing to the construction process, it must remember to call the base constructor with whatever arguments the base wanted. This can be slightly automated using apply, but still you have to write out:

function Point() {     Shape.apply(this, arguments); } Point.subclass(Shape); 

So a common extension is to break out the initialisation stuff into its own function rather than the constructor itself. This function can then inherit from the base just fine:

function Shape() { this._init.apply(this, arguments); } Shape.prototype._init= function(x, y) {     this.x= x;     this.y= y; };  function Point() { this._init.apply(this, arguments); } Point.subclass(Shape); // no need to write new initialiser for Point! 

Now we've just got the same constructor function boilerplate for each class. Maybe we can move that out into its own helper function so we don't have to keep typing it, for example instead of Function.prototype.subclass, turning it round and letting the base class's Function spit out subclasses:

Function.prototype.makeSubclass= function() {     function Class() {         if ('_init' in this)             this._init.apply(this, arguments);     }     Function.prototype.makeSubclass.nonconstructor.prototype= this.prototype;     Class.prototype= new Function.prototype.makeSubclass.nonconstructor();     return Class; }; Function.prototype.makeSubclass.nonconstructor= function() {};  ...  Shape= Object.makeSubclass(); Shape.prototype._init= function(x, y) {     this.x= x;     this.y= y; };  Point= Shape.makeSubclass();  Circle= Shape.makeSubclass(); Circle.prototype._init= function(x, y, r) {     Shape.prototype._init.call(this, x, y);     this.r= r; }; 

...which is starting to look a bit more like other languages, albeit with slightly clumsier syntax. You can sprinkle in a few extra features if you like. Maybe you want makeSubclass to take and remember a class name and provide a default toString using it. Maybe you want to make the constructor detect when it has accidentally been called without the new operator (which would otherwise often result in very annoying debugging):

Function.prototype.makeSubclass= function() {     function Class() {         if (!(this instanceof Class))             throw('Constructor called without "new"');         ... 

Maybe you want to pass in all the new members and have makeSubclass add them to the prototype, to save you having to write Class.prototype... quite so much. A lot of class systems do that, eg:

Circle= Shape.makeSubclass({     _init: function(x, y, z) {         Shape.prototype._init.call(this, x, y);         this.r= r;     },     ... }); 

There are a lot of potential features you might consider desirable in an object system and no-one really agrees on one particular formula.

---

The closure way, then. This avoids the problems of JavaScript's prototype-based inheritance, by not using inheritance at all. Instead:

function Shape(x, y) {     var that= this;      this.x= x;     this.y= y;      this.toString= function() {         return 'Shape at '+that.x+', '+that.y;     }; }  function Circle(x, y, r) {     var that= this;      Shape.call(this, x, y);     this.r= r;      var _baseToString= this.toString;     this.toString= function() {         return 'Circular '+_baseToString(that)+' with radius '+that.r;     }; };  var mycircle= new Circle(); 

Now every single instance of Shape will have its own copy of the toString method (and any other methods or other class members we add).

The bad thing about every instance having its own copy of each class member is that it's less efficient. If you are dealing with large numbers of subclassed instances, prototypical inheritance may serve you better. Also calling a method of the base class is slightly annoying as you can see: we have to remember what the method was before the subclass constructor overwrote it, or it gets lost.

[Also because there is no inheritance here, the instanceof operator won't work; you would have to provide your own mechanism for class-sniffing if you need it. Whilst you could fiddle the prototype objects in a similar way as with prototype inheritance, it's a bit tricky and not really worth it just to get instanceof working.]

The good thing about every instance having its own method is that the method may then be bound to the specific instance that owns it. This is useful because of JavaScript's weird way of binding this in method calls, which has the upshot that if you detach a method from its owner:

var ts= mycircle.toString; alert(ts()); 

then this inside the method won't be the Circle instance as expected (it'll actually be the global window object, causing widespread debugging woe). In reality this typically happens when a method is taken and assigned to a setTimeout, onclick or EventListener in general.

With the prototype way, you have to include a closure for every such assignment:

setTimeout(function() {     mycircle.move(1, 1); }, 1000); 

or, in the future (or now if you hack Function.prototype) you can also do it with function.bind():

setTimeout(mycircle.move.bind(mycircle, 1, 1), 1000); 

if your instances are done the closure way, the binding is done for free by the closure over the instance variable (usually called that or self, though personally I would advise against the latter as self already has another, different meaning in JavaScript). You don't get the arguments 1, 1 in the above snippet for free though, so you would still need another closure or a bind() if you need to do that.

There are lots of variants on the closure method too. You may prefer to omit this completely, creating a new that and returning it instead of using the new operator:

function Shape(x, y) {     var that= {};      that.x= x;     that.y= y;      that.toString= function() {         return 'Shape at '+that.x+', '+that.y;     };      return that; }  function Circle(x, y, r) {     var that= Shape(x, y);      that.r= r;      var _baseToString= that.toString;     that.toString= function() {         return 'Circular '+_baseToString(that)+' with radius '+r;     };      return that; };  var mycircle= Circle(); // you can include `new` if you want but it won't do anything 

Which way is “proper”? Both. Which is “best”? That depends on your situation. FWIW I tend towards prototyping for real JavaScript inheritance when I'm doing strongly OO stuff, and closures for simple throwaway page effects.

But both ways are quite counter-intuitive to most programmers. Both have many potential messy variations. You will meet both (as well as many in-between and generally broken schemes) if you use other people's code/libraries. There is no one generally-accepted answer. Welcome to the wonderful world of JavaScript objects.

[This has been part 94 of Why JavaScript Is Not My Favourite Programming Language.]