Even though most of the world's popular languages are class-based, thanks to JavaScript, a large chunk of the programming world is made up of prototype-based languages. It's also worth mentioning that, after the ECMAScript 2015 (ES6) release, you can use JavaScript as an object-oriented language without any knowledge of the prototype concept, and you won't really feel a difference from other languages in this regard.

Even with classes implemented in JavaScript, the language is still, at its core, prototype-based, and the class implementation is built on top of JavaScript's older structure.

So What Is a Prototype?

When created, every object in JavaScript is linked to another object called its prototype. This link is really a "reference" that provides a path for looking up properties (properties or methods). If the current object doesn't have property "x," the JavaScript engine looks for "x" on its prototype, and this search keeps going until it reaches the end of the chain.

Note: we call this structure the "prototype chain."

Let's first understand why we need a concept like prototype at all. Suppose we want to have an object with a few functions, like this:

const blackBird = {
  color: 'black',
  fly: function() { console.log('flying...') },
}

const whiteBird = {
  color: 'black',
  fly: function() { console.log('flying...') },
}

const blueBird = {
  color: 'black',
  fly: function() { console.log('flying...') },
}

blackBird.fly();

In the code above, we have three bird objects that only differ in color, but with this implementation, we've effectively created 3 duplicate functions in memory. This is where, instead of defining a function over and over, we can create a Prototype and implement it as follows:

function Bird(color) {
  this.color = color;
}

Bird.prototype.fly = function() {
  console.log('flying...');
};

const blackBird = new Bird('black');
const whiteBird = new Bird('white');
const blueBird = new Bird('blue');

blackBird.fly(); // logs "flying..."

So one reason to use Prototype is to reduce duplication and use memory more efficiently. Beyond that, the Prototype mechanism gives us a wide range of capabilities for coding and implementation, one of which we'll look at next.

How Do We Override Methods Higher Up the Chain?

The object defined below has the Object object in its prototype chain by default, and it already has the toString method implemented:

const myObject = {};
console.log(myObject.toString()); // logs "[object Object]"

Now, there are two ways we can change this behavior:

1. Changing the Implementation on a Higher Prototype in the Chain

Object.prototype.toString = function() {
  return 'Tarhche';
};

const myObject = {};
console.log(myObject.toString()); // logs "Tarhche"

2. Changing the Implementation Only on the Object Itself

In the example below, because the toString method exists on the object itself, the JavaScript engine doesn't go up the chain.

const myObject = {};

myObject.toString = function() {
  return 'Tarhche';
};

console.log(myObject.toString()); // logs "Tarhche"
const anotherObject = {};
console.log(anotherObject.toString()); // logs "[object Object]"

So, using this same mechanism, you can globally alter the behavior of JavaScript's built-in elements, such as Date, Array, or Math, by changing their Prototype's methods or values, and that change applies to every instance created from them.