Understanding JavaScript Prototype Inheritance and Classes

What is the difference between Prototype inheritance and classes?

image from google.com

Two essential concepts for understanding how objects work in JavaScript are prototype inheritance and classes. But before we delve into prototypes and classes, let’s first understand the basics of objects in JavaScript.

Understanding Objects in JavaScript

Objects are collections of key-value pairs, where values can be of various types, including functions.

const person = {
  firstName: "John",
  lastName: "Doe",
  greet: function () {
    console.log(`Hello, ${this.firstName} ${this.lastName}!`);
  },
};

person.greet(); // Outputs: "Hello, John Doe!"

The Prototype Chain

Every JavaScript object has a hidden property called [[Prototype]] (also known as __proto__ in modern JavaScript). This property is a reference to another object, known as the object's prototype. If a property or method is not found on the object itself, JavaScript looks up the prototype chain to find it.

const parent = {
  x: 10,
};

const child = {
  y: 20,
};

child.__proto__ = parent;

console.log(child.x); // Outputs: 10

Prototypes and Inheritance