Prototypes in JavaScript

JavaScript is a prototype-based object-oriented language, which means that inheritance and code reuse are managed through a prototype system.

The prototype allows objects to inherit properties and methods from other objects. This inheritance mechanism is called prototypal inheritance.

This allows objects to share methods and properties, which optimizes memory usage.

Furthermore, it’s one of the hardest concepts to understand in the language, so let’s dive deep into it 👇.

What is a Prototype

The prototype is simply an object that all objects have as an internal property, and to which they can access.

All objects in JavaScript have the [[Prototype]] property, which is a reference to another “parent” object.

When you try to access a property or method that doesn’t exist on the object, JavaScript will search for it in the object’s prototype.

It will continue searching through the prototype chain until it finds the property or until it reaches a null prototype (which generally means it has reached a base object).

Object Creation and Prototypes

Let’s see at which point during object creation the prototype is associated with the object.

const person = {
  name: "Carlos",
  age: 30
};

console.log(person.__proto__ === Object.prototype); // true

const animal = {
  makeSound() {
    console.log("Sound");
  }
};

const dog = Object.create(animal);
dog.makeSound(); // "Sound"

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old!`);
};

// Create a new instance of Person
let person1 = new Person("Luis", 30);

// Call the `greet` method from the prototype
person1.greet();  // Output: Hello, my name is Luis and I am 30 years old!

The __proto__ Property

Generally, an object’s prototype is publicly available through the __proto__ property.

console.log(luis.__proto__ === Person.prototype); // true

Direct access to the __proto__ property is not recommended. Instead of __proto__, it’s preferable to use the static methods provided by the Object object to work with prototypes.

console.log(Object.getPrototypeOf(luis) === Person.prototype); // true

const newProto = { newProperty: "value" };
Object.setPrototypeOf(luis, newProto);
console.log(luis.newProperty); // "value"

Modifying Prototypes

We can add methods to a prototype after instances have been created, which is useful for extending functionalities.

Person.prototype.birthday = function() {
    this.age++;
    console.log(`Congratulations ${this.name}, now you are ${this.age} years old.`);
};

luis.birthday(); // Output: "Congratulations Luis, now you are 31 years old."

Array.prototype.printFirstElement = function() {
  console.log(this[0]);
};

let myArray = [10, 20, 30];
myArray.printFirstElement();  // Shows: 10

Prototypal Inheritance in JavaScript

Prototypal inheritance is what allows one object to inherit the properties and methods of another object. This feature is the core of JavaScript’s inheritance system.

For example, consider the following example, where we create two constructor functions: Animal and Perro. The Perro function will inherit from Animal through the prototype:

// Create a base object: Animal
let Animal = {
  greet: function() {
    console.log(`Hello, I am a ${this.type}`);
  }
};

// Create a new object that inherits from Animal
let Dog = Object.create(Animal);

// Define specific properties for Dog
Dog.type = "dog";
Dog.bark = function() {
  console.log("Woof!");
};

// Use the Dog object
Dog.greet(); // "Hello, I am a dog"
Dog.bark();  // "Woof!"

Property Shadowing

If a property is defined on an object and also on its prototype, the object’s property “shadows” the prototype’s property.

This means that when accessing the property, the value from the object is obtained, not the one from the prototype.