Prototypes in Javascript

 

Prototypes

When you reference a property on an object, if that property doesn’t exist, JavaScript will automatically use that object’s internal prototype reference to find another object to look for the property on. You could think of this almost as a fallback if the property is missing.

The internal prototype reference linkage from one object to its fallback happens at the time the object is created. The simplest way to illustrate it is with a built-in utility called Object.create(..).

var foo = {
a: 42
};
// create `bar` and link it to `foo`
var bar = Object.create( foo );
bar.b = "hello world";
bar.b; // "hello world"
bar.a; // 42 <-- delegated to `foo`

The a property doesn’t actually exist on the bar object, but because bar is prototype-linked to foo, JavaScript automatically falls back to looking for a on the foo object, where it’s found.

In JavaScript, objects can inherit features from one another via prototypes. Every object has its own property called a prototype. Because the prototype itself is also another object, the prototype has its own prototype. This creates something called a prototype chain. The prototype chain ends when a prototype has null for its own prototype.

Here's an example of how prototypes work:

const myObject = {
  city: "Madrid",
  greet() {
    console.log(`Greetings from ${this.city}`);
  },
};

myObject.greet(); // Greetings from Madrid

In this example, myObject has a city property and a greet method. But if you look at the properties of myObject, you'll see that it has many more properties. These properties are inherited from myObject's prototype.

Now, let's talk about adding functions into the prototype.

Adding methods to a prototype, instead of individual instances, has performance and memory benefits. By defining them on the prototype, they're shared across instances, ensuring that each instance doesn't consume additional memory for duplicate functions. This allows you to avoid duplicating code and promotes a modular approach to programming.

Here's an example of adding a function to a prototype:

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}

Person.prototype.nationality = "English";

Person.prototype.name = function() {
  return this.firstName + " " + this.lastName;
};

In this example, the nationality property and the name method are added to the Person prototype². This means that all instances of Person will have these properties and methods².

However, it's important to note that you should only modify your own prototypes and never modify the prototypes of standard JavaScript objects. Also, public methods created during construction have poorer performance as each method has to be created every time the constructor function runs. On the other hand, methods on the prototype chain are created once and then "inherited" by each instance.