JSFiddle - React, Tailwind, and code Playground

by deepak sisodiya

HTML

The above is a simple version of the constructor pattern but it does suffer from some problems. One is that it makes inheritance difficult and the other is that functions such as toString() are redefined for each of the new objects created using the Car constructor. This isn't very optimal as the function should ideally be shared between all of the instances of the Car type.

JavaScript

// The Constructor Pattern in javascript

var alert  = function (str) {
   var st = document.createTextNode(str);
   var p = document.createElement('p');
   p.appendChild(st);
   document.querySelector('body').appendChild(p);
}

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
 
  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  }
}

var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );

alert(civic.toString());
alert(mondeo.toString());