Doubt about a particular pattern of Javascript class definition

Question

Recently i saw the following code that creates a class in javascript:

var Model.Foo = function(){
  // private stuff
  var a, b;

  // public properties
  this.attr1 = '';
  this.attr2 = '';

  if(typeof Model.Foo._init === 'undefined'){
    Model.Foo.prototype = {
      func1 : function(){ //...},
      func2 : function(){ //... },
      //other prototype functions
    }
  }
  Model.Foo._init = true;
}

// Instantiate and use the class as follows:
var foo = new Model.Foo(); foo.func1();

I guess the _init variable is used to make sure we don't define the prototypes again. Also, i feel the code is more readable since i am placing everything in a function block (so in oop-speak, all attributes and methods are in one place). Do you see any issues with the code above? Any pitfalls of using this pattern if i need to create lots of classes in a big project?

Answer 1

This is a weird Javascript pattern that I would never use to develop object-oriented JS code. For one thing, Model.Foo._init === 'undefined' never evaluates to true if Model.Foo._init is anything but the string 'undefined'; therefore, the code

Model.Foo.prototype = {
    func1 : function(){ /* ... */},
    func2 : function(){ /* ... */},
    //other prototype functions
}

will not run unless that condition holds true. (Perhaps the author meant to add a typeof, as in typeof Model.Foo._init === 'undefined'? I don't know.)

Addressing your concern about "[making] sure we don't define the prototypes again", this is already achieved with:

Model.Foo = function() {
    // private stuff
    var a, b;

    // public properties
    this.attr1 = '';
    this.attr2 = '';
};

Model.Foo.prototype = {
    func1 : function() { /* ... */},
    func2 : function() { /* ... */}
    //,other prototype functions
};

// Instantiate and use the class as follows:
var foo = new Model.Foo();
foo.func1();

which is along the lines of what I recommend if you aren't using a framework.

Basically, the answer to your question is: if you use this non-standard pattern for development, then other programmers, maybe even yourself a few months later, will find it difficult to extend and work with.

Answer 2

A few things stand out as potentially troublesome:

1. Foo.prototype is set to a simple object, which can't extend anything using this pattern.
2. Where is the "private stuff" used? Every time you create a new object, you create new private variables, which seemingly can only be used in the functions defined in Foo.prototype, which should only be run once.

It's kind of a mess, and there are details/examples all over the web of better was to do this.

Answer 3

It just seems unnecessarily complex. You need to be disciplined to not use any parameters or local variables of Model.Foo in the implementation of the prototype extension. Its odd to overwrite the entire .prototype object and not just add individual members as well. Why not just do this the normal way?

var Model.Foo = function(){
  // private stuff
  var a, b;

  // public properties
  this.attr1 = '';
  this.attr2 = '';
}

Model.Foo.prototype.func1 = function(){ //...};
Model.Foo.prototype.func2 = function(){ //... };

alternate allowing per-instance member variables private

var Model.Foo = function(){
  // private stuff
  var a, b;

  // public properties
  this.attr1 = '';
  this.attr2 = '';

  this.func1 = function(){ //...};
  this.func2 = function(){ //... };
}