Last Updated: September 09, 2019
·
1.185K
· gerardsans

JavaScript Constructors

Sons of JavaScript Collection | this article

I mainly use two types of constructors: literal and custom constructor functions.

These can take many forms. The ones I care to mention below.

Literal Constructor (broken up)

I am not in a hurry option.

//creation separated from initialisation
var order = {};
...
order.id = 1;
...
order.customer = {}; //ups I did it again
order.customer.id = 1;

Literal Constructor (in one statement)

I need a break soon option.

//creation and initialisation together
var order = {
  id: 1,
  customer: { 
    id: 1
  }
};

Custom Constructor Functions (standard)

Old school JavaScript option.

//Using standard function definition
//note: convention is to use capital first letter
function Order(id) {
  //new keyword implicit code: var this = {};
  this.id = id;
  //implicit: return this;
};
...
var order = new Order(1);

Custom Constructor Functions (using an extra reference)

Fancy developers choice. I don't mind using extra complexity (anonymous function) and resources (extra reference) for apparently no reason.

//Using an anonymous function reference
var Order = function(id) { 
  //new keyword implicit code: var this = {};
  this.id = id;
  //implicit: return this;
};
...
var order = new Order(1);

Custom Constructor Functions (returning a new object)

Another level of fanciness when you don't like using the default this object.

//Using a new object
var Order = function(id) { 
  //we ignore 'this' altogether... it's evil right?
  var that = {};
  that.id = id;
  return that;
};
...
var order = new Order(1);

Custom Constructor Functions (returning a new object abbreviated)

Previous one abbreviated.

//Using a new object
var Order = function(id) { 
  //we ignored (this) but avoided using an extra variable (that)
  return { 
    id: id 
  };
};
...
var order = new Order(1);

References: JavaScript Patterns by Stoyan Stefanou.

Sons of JavaScript Collection | this article

6 Responses
Add your response

Nice. I've grown fond of doing this:

var Order = (function() {
    // initialise some stuff before the return
    return function Order(x){
        this.id = x;
    }
})();

var order = new Order(1);
over 1 year ago ·

I see. I will write about JavaScript modularisation soon. As an example for a constructor is a little overkill though. Thanks!

over 1 year ago ·

Some will be surprised here. link

var stranger = 2;
var Order = (function() {
   return function(id) {
     this.id = id;
     this.value = stranger;
     stranger = 3;
   }
})();
var order = new Order(1);
console.log(order.id); // 1
console.log(order.value); // 2
console.log(stranger); // 3
over 1 year ago ·

That is because at the time constructor is invoked with new, stranger is 2. Only after order.value is assigned does stranger become 3.

The self executing function may be overkill but maybe it's because I'm new to all of this that I'm finding the amusement in it:

var Order = (function(altConstructor) {
    var y = 10;
    return altConstructor || function Order(x){
      this.id = x;
      this.y = y
    }
})(
    (function(condition){ 
        /* return completely different constructor or null */ 
    })(condition)
);
over 1 year ago ·

You really don't understand what you're doing. Your first 4 functions are the same (could be hotswapped with no differences in the calling code. The 5th... well it's set up to allow you to be different, but you don't actually take advantage of it. (It's the first one where you put yourself in a position to use scope to create a closure, but but returning every property in an object, you are doing the same thing as returning this.

over 1 year ago ·

These are examples of different notations for constructors.

over 1 year ago ·