What are prototypes in JavaScript, and how does prototypal inheritance work?

Suppose you ask a junior in your hostel for a calculator. If they do not have one, they ask their senior. If the senior does not have one either, the senior asks the warden. The first person in that chain who has a calculator lends it. If nobody has one, the answer is "not available".

JavaScript objects work exactly like this. Each object has a hidden link to another object, its prototype. When you read obj.something and obj does not have its own something, JavaScript asks the prototype, then the prototype's prototype, and so on. This is the prototype chain. It ends at Object.prototype, whose prototype is null. If the property is not found anywhere, you get undefined.

That is prototypal inheritance: objects inherit directly from other objects, not from class blueprints the way Java does.

const animal = {
  eats: true,
  describe() {
    return this.name + " eats: " + this.eats;
  },
};

const dog = Object.create(animal); // dog's prototype is animal
dog.name = "Tommy";

console.log(dog.describe()); // Output: Tommy eats: true
console.log(Object.getPrototypeOf(dog) === animal); // Output: true
console.log(Object.hasOwn(dog, "name")); // Output: true
console.log(Object.hasOwn(dog, "eats")); // Output: false

function Student(name) {
  this.name = name;
}
Student.prototype.intro = function () {
  return "I am " + this.name;
};

const meera = new Student("Meera");
const arjun = new Student("Arjun");
console.log(meera.intro()); // Output: I am Meera
console.log(meera.intro === arjun.intro); // Output: true

class Topper extends Student {
  intro() {
    return super.intro() + ", rank 1";
  }
}
const riya = new Topper("Riya");
console.log(riya.intro()); // Output: I am Riya, rank 1
console.log(riya instanceof Student); // Output: true
console.log(typeof Topper); // Output: function

meera.intro === arjun.intro is true because the method is stored once, on Student.prototype, and both objects reach it through the chain. typeof Topper is "function" because a class is a special kind of constructor function.

• Object.create(proto) makes a new object whose prototype is proto.
• Every normal function has a prototype property. new Student("Meera") creates an object, sets its prototype to Student.prototype, runs Student with this set to that object, and returns it.
• class Topper extends Student sets up two links: Topper.prototype inherits from Student.prototype (for methods), and Topper inherits from Student (for static methods).
• Reading a property walks the chain. Writing a property always creates or updates it on the object itself; it does not change the prototype. This is called shadowing.
• instanceof checks whether Student.prototype appears anywhere in the object's chain.

Every array you create can call map and filter because those methods live once on Array.prototype. Every string has toUpperCase through String.prototype. Classes in React, Angular services and Node's EventEmitter subclasses all rely on the prototype chain. Putting methods on the prototype instead of inside the constructor saves memory when you create thousands of objects.

• Mixing up __proto__ / Object.getPrototypeOf(obj) (the object's actual link) with a function's prototype property (the object that will become the prototype of instances created with new).
• Defining methods inside the constructor with this.intro = function () {}, which creates a new copy for every instance.
• Changing built-in prototypes like Array.prototype. It can break other code and future language features.
• Thinking classes make JavaScript use classical inheritance. They are mostly syntax over prototypes.

• What is the difference between __proto__ and prototype?
• What exactly does the new keyword do, step by step?
• How would you create an object with no prototype at all, and why?