What's a real-life example of prototypal inheritance? [duplicate]

Question

I'm trying to level-up in JavaScript (I'm not using it much at work), and have pretty well wrapped my head around Constructor functions and how to instantiate new Objects that inherit properties from them.

But usually to really learn something, I need to use it in a real project I'm working on and see it in action.

Problem is, everything I'm reading uses examples like these to explain inheritance:

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = getAppleInfo;
}

or

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";
  };
}

or

function makeBaby(parent, name) {

  var baby = Object.create(parent);

  baby.name = name;

  return baby;
}

As you might imagine, these sorts of examples (Fruit, Cars, and Parents) are definitely helpful for the purposes of learning concepts, but not really in putting them into practice.

Does anyone have an example of how prototypal inheritance might work in a production-level web application?

Answer 1

It's not just prototypal inheritance, but the use-cases also apply to classical inheritance.

Generally, you want to extend the properties and functionalities of one class to another. A beautiful example of this is a view class. It has a draw method that draws to a screen. A great way to reuse code.

So Instead of you duplicating by hand all of the properties of one class to another, you would simply extend from the base class, and you would have all the functionalities of it, as well as adding your own implementations.

An example code that does not use inheritance:

/**
 * View1
 */
function View1 {
  this.viewId = 'view-1';
  this.template = '<some html here>'
}

View1.prototype.draw = function () {
  var ourView = document.getElementById(this.viewId);

  // ps. I know this is redundant, but it's here for illustration purposes.
  var newElement = document.createElement('div');
  ourView.appendChild(newElement);

  ourView.innerHTML = this.template;
}


/**
 * View2
 */
function View2 {
  this.viewId = 'view-2';
  this.template = '<some html here>'
}

View2.prototype.draw = function () {
  var ourView = document.getElementById(this.id);

  // ps. I know this is redundant, but it's here for illustration purposes.
  var newElement = document.createElement('div');
  ourView.appendChild(newElement);

  ourView.innerHTML = this.template;
}

As you can see above, there are a lot of duplicate code.

Compare that with code that uses inheritance:

/**
 * View1
 */
function View1 {
  this.viewId = 'view-1';
  this.template = '<some html here>'
}

View1.prototype.draw = function () {
  var ourView = document.getElementById(this.viewId);

  // ps. I know this is redundant, but it's here for illustration purposes.
  var newElement = document.createElement('div');
  ourView.appendChild(newElement);

  ourView.innerHTML = this.template;
};

/**
 * View2
 */
function View2 {
  this.viewId = 'view-2';
  this.template = '<some html here>'
}

Object.assign(View2.prototype, View1.prototype);

View2 never needs to re-implement code from View1. Instead, it simply reuses it.