The prototype chain

Prototype links

Every ordinary JavaScript object has a hidden link to one other object. The link is called [[Prototype]]. The double square brackets mean the link lives inside JavaScript. You cannot write rabbit.[[Prototype]] in your code.

When you read a property, JavaScript first looks on the object itself. If the property is not there, JavaScript follows the link to the other object and looks there. It keeps going, one link at a time. This path of linked objects is the prototype chain. The object at the other end of a link is called a prototype.

This lesson uses ideas from earlier lessons:

• Object basics: the in operator, Object.hasOwn, and the toString method that every object seems to have.
• Constructors & new: new links each new object to Constructor.prototype.
• Methods & this, and The this keyword: the object before the dot becomes this.
• Scope: how JavaScript finds variables.

Scope finds variables, like rabbit. The prototype chain finds properties, like rabbit.eats.

1const animal = { eats: true };2const rabbit = { __proto__: animal, jumps: true };3console.log(Object.getPrototypeOf(rabbit) === animal);4console.log(rabbit.eats);

Line 2 makes rabbit and points its link at animal. Line 3 prints true: Object.getPrototypeOf(rabbit) gives back the object at the other end of the link, which is animal. Line 4 prints true: rabbit has no eats, so JavaScript finds it on animal.

Three Object methods work with the link:

• Object.getPrototypeOf(obj) gives you the object at the other end of the link.
• Object.create(proto) makes a new, empty object whose link points at proto.
• Object.setPrototypeOf(obj, proto) changes the link of an object that already exists.

1const animal = { eats: true };2const rabbit = Object.create(animal);3 4console.log(Object.getPrototypeOf(rabbit) === animal);5Object.setPrototypeOf(rabbit, null);6console.log(rabbit.eats);7console.log(Object.getPrototypeOf(rabbit) === null);

Line 4 prints true: the link points at animal. Line 5 sets the link to null, so now there is no next object. Line 6 prints undefined: rabbit has no eats, and there is nowhere left to look. Line 7 prints true.

JavaScript engines (the programs that run your code) work faster when an object keeps the same link. So set the link when you create the object, if you can.

Here is the simplest everyday use. One object holds a method, and another object uses it through the link.

1const person = {2  greet() {3    return "Hello";4  },5};6const user = Object.create(person);7console.log(user.greet());8console.log(Object.hasOwn(user, "greet"));

Line 6 makes user with its link pointing at person. Line 7 calls user.greet(). user has no greet, so JavaScript finds it on person and prints Hello. Line 8 prints false: greet was not copied onto user.

An object owns a property when the property is stored on the object itself. A property that JavaScript finds through the link is inherited. The step-through below uses two objects:

• animal owns eats and a walk method.
• rabbit owns jumps. Its link points at animal.

rabbit also finds toString. That method lives on Object.prototype, the built-in object that sits after animal in the chain.

1const animal = { eats: true, walk() { this.isWalking = true; } };Run2const rabbit = Object.create(animal);3rabbit.jumps = true;4 5console.log(rabbit.jumps);6console.log(rabbit.eats);7console.log(typeof rabbit.toString);8console.log(rabbit.fly);

A chain can have more than two objects. Here JavaScript checks dog, then animal, then Object.prototype.

1const animal = { sleeps: true };2const dog = Object.create(animal);3dog.barks = true;4 5console.log(dog.barks);6console.log(dog.sleeps);7console.log(Object.getPrototypeOf(Object.getPrototypeOf(dog)) === Object.prototype);

Line 5 prints true from dog itself. Line 6 prints true from animal. Line 7 calls Object.getPrototypeOf twice. The first call gives animal. The second gives the prototype of animal, which is Object.prototype, so it prints true.

When a property is missing, JavaScript does not stop at the first object. It checks every object in the chain. Only when the next link is null does it give back undefined.

1const animal = { sleeps: true };2const dog = Object.create(animal);3 4console.log(dog.flies);5console.log("flies" in dog);

Line 4 prints undefined. Line 5 prints false: the in operator also searched the whole chain and found nothing.

Reading and writing work differently:

• A read climbs the chain until it finds the property.
• A normal write, like rabbit.eats = false, stores the property on the object before the dot. It does not change the prototype.
• If an object owns a property with the same name as one further up the chain, JavaScript finds the own one first. We say the own property shadows the inherited one: it hides it.

1const animal = { eats: true };Run2const rabbit = Object.create(animal);3 4rabbit.eats = false;5console.log(rabbit.eats);6console.log(animal.eats);7 8delete rabbit.eats;9console.log(rabbit.eats);

1const animal = {2  set mood(value) {3    this.savedMood = value;4  },5};6const rabbit = Object.create(animal);7rabbit.mood = "curious";8console.log(rabbit.savedMood);9console.log(Object.hasOwn(rabbit, "mood"));

Line 7 runs the setter from animal, with this set to rabbit. So line 8 prints curious. Line 9 prints false: rabbit never got its own mood.

delete removes only a property that the object owns. It never touches the prototype. Once the own property is gone, the inherited one shows again.

1const person = { name: "Person" };2const user = Object.create(person);3user.name = "Asha";4delete user.name;5 6console.log(user.name);7console.log(Object.hasOwn(user, "name"));

Line 3 gives user its own name. Line 4 deletes it. Line 6 prints Person, found on person. Line 7 prints false.

One more case. A property can be marked non-writable, which means its value cannot be changed. Object.defineProperty makes a property with settings like this. If the prototype has a non-writable property, a normal assignment to that name does nothing in a script without "use strict". It does not create an own property.

1const animal = {};2Object.defineProperty(animal, "id", { value: 1, writable: false });3const rabbit = Object.create(animal);4 5rabbit.id = 2;6console.log(rabbit.id);7console.log(Object.hasOwn(rabbit, "id"));

Line 6 prints 1: the inherited id did not change. Line 7 prints false: rabbit has no own id. In strict mode, the same assignment throws a TypeError instead. Either way, the write did not create a shadow.

An own property is stored on the object itself. An inherited property is found by following the link. You read both the same way, with a dot. So when it matters where a property is stored, you need a check.

1const animal = { eats: true, walk() {} };2const rabbit = Object.create(animal);3rabbit.jumps = true;4 5let current = rabbit;6while (current !== null) {7  // Check own properties, then climb.8  current = Object.getPrototypeOf(current);9}

Where a property is stored also changes which keys you get when you list them:

• Object.keys(obj) lists only the keys the object owns.
• for...in also lists keys from the prototypes.
• Both skip keys that are marked non-enumerable, which means hidden from listing.

If you want only own keys in a for...in loop, check each key with Object.hasOwn.

1const animal = { country: "India" };2const rabbit = Object.create(animal);3rabbit.name = "Asha";4 5console.log(Object.keys(rabbit).join(","));6const keys = [];7for (const key in rabbit) keys.push(key);8console.log(keys.join(","));

Line 5 prints name. Lines 6 to 8 collect keys with for...in and print name,country. The key country came from animal.

Object.create(null) makes an object with no link at all, so its chain ends right away. This is handy for a dictionary: an object you use only to store keys and values. No extra names like toString come along. But it has no helper methods either. So call Object.hasOwn(settings, key), because settings.hasOwnProperty does not exist.

1const settings = Object.create(null);2settings.theme = "light";3 4console.log(Object.hasOwn(settings, "theme"));5console.log("toString" in settings);6console.log(typeof settings.toString);

Line 4 prints true. Line 5 prints false, and line 6 prints undefined: there is no Object.prototype in the chain, so there is no toString to find.

hasOwnProperty, isPrototypeOf & propertyIsEnumerable

Each check answers a different question. Pick the one that matches what you want to know:

• Is the property stored on this object?
• Can JavaScript find the property anywhere in the chain?
• Is this object somewhere in that object's chain?
• Will the property show up when I list the keys?

Each row of the table is one check. Read across: what it answers, then when to use it.

1const animal = { eats: true };2Object.defineProperty(animal, "secret", {3  value: "warehouse",4  enumerable: false,5});6const rabbit = Object.create(animal);7rabbit.jumps = true;8 9console.log(Object.hasOwn(rabbit, "jumps"));10console.log(Object.hasOwn(rabbit, "eats"));11console.log("eats" in rabbit);12console.log(Object.keys(rabbit).join(","));13console.log(animal.isPrototypeOf(rabbit));14console.log(animal.propertyIsEnumerable("secret"));

Lines 2 to 5 add a secret property to animal. enumerable: false hides it from listing. Then the six lines print:

• Line 9: true. rabbit owns jumps.
• Line 10: false. eats is on animal, not on rabbit.
• Line 11: true. in finds eats through the link.
• Line 12: jumps. Only the own key is listed.
• Line 13: true. animal is in the chain of rabbit.
• Line 14: false. secret is hidden from listing.

Object.hasOwn is safer than obj.hasOwnProperty. It still works when the object has no prototype, and when the object has its own property named hasOwnProperty. propertyIsEnumerable is stricter than both. It is true only when the object owns the property and the property is not hidden from listing.

A method can be found on a prototype and still work on the object before the dot. In rabbit.walk(), JavaScript finds walk on animal. But rabbit is before the dot, so this is rabbit.

The method is written inside the object on purpose. A minifier is a tool that makes code smaller before it goes live. It could move a separate function around and change what this shows in this demo.

1const animal = {Run2  walk() {3    this.isWalking = true;4  },5};6const rabbit = Object.create(animal);7 8rabbit.walk();9console.log(rabbit.isWalking);10console.log(animal.isWalking);

This is why methods on a prototype are useful. One function can serve many objects, and each object keeps its own data, such as isWalking.

Where you’ll use this

The prototype chain explains things you use every day:

• Every array has map, because map lives on Array.prototype.
• Every date has toISOString, because it lives on Date.prototype.
• Objects made with the same constructor share its methods.
• A class stores each method once, not on every object.

The next lesson, F.prototype & constructors, shows how new sets this link.

Built-in objects use the same chain. An array links to Array.prototype. A function links to Function.prototype. Both of those link to Object.prototype.

1const scores = [10, 20];2function greet() {}3 4console.log(Object.getPrototypeOf(scores) === Array.prototype);5console.log(Object.getPrototypeOf(greet) === Function.prototype);6console.log(Object.getPrototypeOf(Array.prototype) === Object.prototype);

The chain can also cause bugs. If a prototype holds an array, every linked object uses that same array. Changing it through one object changes it for all of them.

1const animal = { skills: [] };2const rabbit = Object.create(animal);3const fox = Object.create(animal);4 5rabbit.skills.push("jump");6fox.skills.push("sneak");7console.log(rabbit.skills.join(","));

On line 5, rabbit has no own skills, so JavaScript finds the array on animal and pushes into it. Line 6 does the same for fox. Line 7 prints jump,sneak.

1const animal = { skills: [] };2const rabbit = Object.create(animal);3const fox = Object.create(animal);4 5rabbit.skills = [];6fox.skills = [];7rabbit.skills.push("jump");8fox.skills.push("sneak");9console.log(rabbit.skills.join(","));

Lines 5 and 6 give each object its own new array. Now line 9 prints jump.

A factory is a function that makes and returns new objects. It can keep the shared methods on one prototype and give each new object its own data. This is usually clearer than changing links after the objects exist.

1const userMethods = {2  greet() {3    return "Hi " + this.name;4  },5};6function makeUser(name) {7  const user = Object.create(userMethods);8  user.name = name;9  return user;10}11const user = makeUser("Asha");12console.log(user.greet());13console.log(Object.hasOwn(user, "greet"));

Line 12 prints Hi Asha. Line 13 prints false: greet is inherited, while name is own. Class objects work the same way: the methods sit on one prototype, and each object keeps its own data.

Common misconceptions

For each code sample, ask two questions. Where is the property stored? Does the code read, write, delete, or call it?

Key takeaways

• [[Prototype]] is a hidden link from one object to another. JavaScript uses it to find properties.
• A read checks the object first, then each prototype in turn. If the next link is null, the result is undefined.
• An own property with the same name hides (shadows) the inherited one.
• Object.hasOwn asks "Is it stored here?" in asks "Can JavaScript find it anywhere in the chain?"
• An inherited method gets this from the object before the dot, so rabbit.walk() writes to rabbit.

Up next: F.prototype & constructors.