JavaScript Constructor Pattern and Prototype Chain

Photo by Matt Artz on Unsplash

In JavaScript, almost everything, except primitive types, is an object, and every object has a constructor function. To create custom objects for our project, we can also create constructor functions. The topic may seem a bit complex for beginners, so I will use Turkish for the naming within the code.

var Car = function(features){
      this.wheelCount = features.wheelCount;
      this.seatcount = features.seatcount;
      this.gearType = features.gearType;
      this.color = features.color;
};

Above, we defined the constructor function for the car and determined its various properties; You can multiply them as many times as you wish. Now let’s produce a car.

var ford = new Car({
      Number of wheels: 4,
      Number of seats: 4,
      gearType: "manual",
      color: "grey"
});
console.log(ford);
// Car {Number of wheels: 4, Number of seats: 4, gearType: "manual", color: "grey"}

I created a Ford brand vehicle using new Car() and the output in the console section was as above. I can create many vehicles this way using the car constructor function, and the changes I make in this constructor will affect all the cars I create.

We can see this by adding a method called “go” to the Constructor function.

var Car = function(features){
      this.wheelCount = features.wheelCount;
      this.seatcount = features.seatcount;
      this.gearType = features.gearType;
      this.color = features.color;
      this.go = function() {
           console.log("vehicle is moving forward");
      };
};
console.log(ford);
// Car {Number of wheels: 4, Number of seats: 4, gearType: "manual", color: "grey", forward: f}
ford.go(); // the vehicle is moving

When we look at the output in the console section, you can see that our gomethod has been added. But it is not right to add methods in this way. It is best to add methods using the prototype chain method. I explain this below.

Important Note: In the codes above, we created an object constructor, we did not create an object.

There are several methods of creating a Prototype Chain, but they all lead to the same thing. Let’s continue with the codes we wrote above without getting too confused.

var Car = function(features){
      this.wheelCount = features.wheelCount;
      this.seatcount = features.seatcount;
      this.gearType = features.gearType;
      this.color = features.color;
};
Car.prototype.go = function() {
      console.log("vehicle is moving forward");
};

We determined our Proceed method as the prototype of the Car constructor. We can move our Ford vehicle in the same way.

ford.go(); // the vehicle is moving

When we define methods in the constructor and create a new object (such as new Car()), the methods in the constructor are copied to the new object. In the browser memory, the same method is defined many times for each object. If we assign it as a prototype, the methods are not copied and remain as references in the constructor. It is very important for performance.

Now let’s stop our vehicle and finish the topic.

car.prototype.stop = function(){
      console.log("vehicle stopped");
};
ford.stop(); // vehicle stopped

You can also send parameters to prototype.

car.prototype.stop = function(handbrake){
      if (elfreni) {
           console.log("vehicle stopped with handbrake");
           return;
      }
      console.log("vehicle stopped");
};
ford.stop(true); // the vehicle is stopped with the handbrake