Using a constructor function to create objects

In JavaScript, the entities that create objects with shared behaviour are functions which are called in a special way. These special functions are called constructors.

Let's create a constructor for cars. We are going to call this function Car, with a capital C, which is common practice to indicate that this function is a constructor.

In a way, this makes the constructor function a class, because it does some of the things a class (with a constructor method) does in a traditional OOP language. However, the approach is not identical, which is why constructor functions are often called pseudo-classes in JavaScript. I will simply call them classes or constructor functions.

Because we are going to encounter two new concepts that are both necessary for shared object behaviour to work, we are going to approach the final solution in two steps.

Step one is to recreate the previous solution (where a common function spilled out independent car objects), but this time using a constructor:

var Car = function() {
  this.honk = function() {
    console.log('honk honk'); 
  };
};

When this function is called using the new keyword, like so:

var myCar = new Car();

It implicitly returns a newly created object with the honk function attached.

Using this and new makes the explicit creation and return of the new object unnecessary - it is created and returned behind the scenes (i.e., the new keyword is what creates the new, invisible object, and secretly passes it to the Car function as its this variable).

You can think of the mechanism at work a bit like in this pseudo-code:

// Pseudo-code, for illustration only!

var Car = function(this) {
  this.honk = function() {
    console.log('honk honk');
  };
  return this;
};

var newObject = {};
var myCar = Car(newObject);

As said, this is more or less like our previous solution – we don't have to create every car object manually, but we still cannot modify the honk behaviour only once and have this change reflected in all created cars.

But we laid the first cornerstone for it. By using a constructor, all objects received a special property that links them to their constructor:

var Car = function() {
  this.honk = function() {
    console.log('honk honk'); 
  };
};
var myCar1 = new Car();
var myCar2 = new Car();

console.log(myCar1.constructor);  // outputs [Function: Car]
console.log(myCar2.constructor);  // outputs [Function: Car]

All created myCars are linked to the Car constructor. This is what actually makes them a class of related objects, and not just a bunch of objects that happen to have similar names and identical functions.

Now we have finally reached the moment to get back to the mysterious prototype we talked about in the introduction.