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.
Written by gerardsans
Related protips
6 Responses
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);
I see. I will write about JavaScript modularisation soon. As an example for a constructor is a little overkill though. Thanks!
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); // 3That 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)
);
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.
These are examples of different notations for constructors.
Have a fresh tip? Share with Coderwall community!
