Prototypes and the prototype chain

Where do methods like push come from?

You create an array with [1, 2] and can immediately call .push or .map, but you never put those methods on it. They live on a shared object, Array.prototype. Your array has a hidden link to it. This link is called the object's prototype, written [[Prototype]] in the specification.

Property lookup walks the chain

When you read obj.x, the engine checks obj itself. If x is not there, it checks obj's prototype, then the prototype's prototype, until it finds x or reaches null at the end of the chain (then the result is undefined). Writing obj.x = 1 always creates or changes the property on obj itself.

const nums = [1, 2];
console.log(Object.getPrototypeOf(nums) === Array.prototype);        // true
console.log(Object.getPrototypeOf(Array.prototype) === Object.prototype); // true
console.log(Object.getPrototypeOf(Object.prototype));                // null (end)
// nums → Array.prototype → Object.prototype → null

Object.create: choose the prototype

const animal = {
  speak() { return `${this.name} makes a sound`; },
};
const dog = Object.create(animal); // dog's prototype is animal
dog.name = 'Tommy';
console.log(dog.speak());            // Tommy makes a sound (found on animal)
console.log(Object.hasOwn(dog, 'speak')); // false: it is inherited

Constructor functions: the older way

Before classes (ES2015), people wrote constructor functions and called them with new. Every function has a .prototype object; objects made with new F() get F.prototype as their prototype. Methods placed on F.prototype are shared by all instances, so they exist in memory only once.

function Account(owner, balance) {
  this.owner = owner;
  this.balance = balance;
}
Account.prototype.deposit = function (amount) {
  this.balance += amount;
  return this.balance;
};
const a1 = new Account('Asha', 100);
const a2 = new Account('Ravi', 50);
console.log(a1.deposit(25));                   // 125
console.log(a1.deposit === a2.deposit);        // true: one shared function

What new does, step by step: it creates an empty object, sets its prototype to F.prototype, runs F with this = that object, and returns it.

Shadowing

If an object has its own property with the same name as one on the prototype, its own property wins. This is called shadowing, and it is how a class overrides an inherited method.