JavaScript constructors

Fact: JavaScript is an object-oriented language.

So you can ask: where are the damn classes?

The truth is that there are no classes. JavaScript objects are soft: one can freely add, modify or remove properties from each of them individually in runtime. It’s a diferent way of programming object oriented, and a very powerful way.

The new operator

To master object orientation in JavaScript you need to clearly understand the new operator behaviour. This operators is used to create and initialize a new object given a function, called “constructor function”. For example:

function Person(name) {
	this.name = name;
}

var diego = new Person("Diego");
alert(diego.name); // Alerts "Diego"

var gabriel = new Person("Gabriel");
alert(gabriel.name); // Alerts "Gabriel"

Notice that diego and gabriel are not instances of Person class. Indeed, there’s no Person class, just a function named Person. Remember: there are no classes in JavaScript

When the new operator is used, an empty object is created and passed to the constructor function as the this reference. The function then can add members to that object by simple assignment, as in this.name = name.

Unless the function returns a not null object, the object this is returned and a reference for the constructor function is stored in the constructor property.

The result is very similar to class instantiation and we are tempted to call Person a class. It would be a real class if the object couldn’t be modified after its creation. JavaScript doesn’t works that way: objects can have properties and methods removed or modified anytime after their construction.

For didactic purpose, we’ll now implement the JavaScript new operator as a function:

var operatorNew = function (constructorFunction, args) {

	var object = {}, // creates an empty object
	    returnValue;

	// calls the function passing the object as 'this'.
	returnValue = constructorFunction.apply(object, args);

	if ((typeof(returnValue) !== "object" &&
	    typeof(returnValue) !== "function") ||
	    returnValue === null) {

		// if returnValue is not a not-null object returns 'this'
		returnValue = object;
		returnValue.constructor = constructorFunction;

	}

	return returnValue;
}

So the call…

var object = new ConstructorFunction(arg1, arg2, ...);

… will be the same as

var object = operatorNew(ConstructorFunction, [arg1, arg2, ..]);

… for any ConstructorFunction implemented in JavaScript.

PS: It won’t work with primitive types (String, Array etc). These are implemented in the browser, not in JavaScript code.

Analysing the operatorNew function we created, we realize that the new operator is just a shortcut. We can always create objects from literal notation then add members freely using no constructor at all.

Look at the following code:

var diego1 = new Person("Diego");

var diego2 = {}
diego2.name = "Diego";
diego2.constructor = Person;

var diego3 = {constructor: Person, name: "Diego"};

var diego4 = operatorNew(Person, ["Diego"]);

The objects diego1, diego2, diego3 and diego4 are equal!

Make no mistake: objects and construtors are in, classes are out.

That’s the JavaScript way.