Understanding Prototypal Inheritance and the Prototype Chain

The Mystery of Inherited Properties

Let's start with a simple observation that seems to defy logic. Consider this object:

const user = {
  name: 'Alex'
};

This object clearly has only one property: name. Yet, you can call a method like toString() on it without error:

console.log(user.toString()); // Outputs: "[object Object]"

Where did toString() come from? The user object doesn't define it. The answer lies in prototypal inheritance.

Every object in JavaScript has a hidden internal property, denoted in the ECMAScript specification as [[Prototype]], which is a link to another object. When you try to access a property that doesn't exist on the current object, the JavaScript engine follows this [[Prototype]] link to look for the property on the linked object. This linked object is called the prototype.

This creates a prototype chain: a series of linked objects that the engine traverses to resolve property lookups. This chain continues until it reaches an object whose [[Prototype]] is null, which marks the end of the chain.

The Property Lookup Algorithm

The process of accessing a property (e.g., myObject.myProp) follows a simple, deterministic algorithm:

1. The engine checks if myProp exists as an own property of myObject.
2. If yes, the value of that property is returned.
3. If no, the engine follows the [[Prototype]] link to myObject's prototype.
4. It repeats step 1 on the prototype object.
5. This process continues up the prototype chain until the property is found or the end of the chain (null) is reached.
6. If the end of the chain is reached without finding the property, undefined is returned.

To see this process in action, the following video segment provides an excellent visual and code-based walkthrough.

It's important to note that this chain is only for reading properties. When you write to a property (myObject.myProp = 'someValue'), you are always creating or modifying an own property on myObject itself. This is called property shadowing—the new own property "shadows" any property of the same name that might exist further up the prototype chain.

[[Prototype]] vs. .prototype: The Core Distinction

Here we arrive at one of the most common points of confusion in JavaScript. We have two very similar-looking terms that mean different things:

1. [[Prototype]]: An internal, hidden property on nearly all objects. It is the link to the next object in the prototype chain. It can be accessed via Object.getPrototypeOf(obj).
2. .prototype: A regular property that exists on all functions (except arrow functions). It's just a plain object. Its sole purpose is to become the [[Prototype]] of any new objects created when that function is used as a constructor with the new keyword.

Let's make this concrete.

// A constructor function
function User(name) {
  this.name = name;
}

// User.prototype is an object. We can add shared methods to it.
User.prototype.sayHi = function() {
  console.log(`Hi, I'm ${this.name}`);
};

// When we use 'new', we create a new object `newUser`.
const newUser = new User('Sasha');

// The JS engine does something crucial behind the scenes:
// It sets newUser's [[Prototype]] to be User.prototype.
// Object.getPrototypeOf(newUser) === User.prototype; // true

// Now, newUser can access the sayHi method.
newUser.sayHi(); // Hi, I'm Sasha

The sayHi method is found by traversing newUser's [[Prototype]] link to the User.prototype object.

This diagram is extremely helpful for visualizing these distinct links.

The Behavior of this in Inherited Methods

As we saw in the previous lesson, the value of this is determined at call time. This rule holds true for inherited methods.

No matter where a method is found in the prototype chain, the this keyword inside that method always refers to the object that initiated the call (the object before the dot).

This is a powerful feature. It allows objects to share methods from a prototype but operate on their own unique state.

A Common Pitfall: Shared Mutable State

While sharing methods is efficient, sharing properties that are mutable reference types (like arrays or objects) can lead to unintended side effects. If a property on the prototype is an object, all instances will share a reference to that single object.

The "hamster stomach" problem in the next reading is a classic illustration of this bug.

The "Pure" Prototypal Way: Object.create()

While constructor functions and the new keyword are the traditional way to leverage prototypes, some argue that they obscure the true nature of prototypal inheritance by mimicking classical inheritance.

The modern Object.create(proto) method provides a more direct and "pure" way to create an object with a specified prototype. It creates a new, empty object whose [[Prototype]] is set to the proto object you pass in.

const personPrototype = {
  greet() {
    return `Hello, my name is ${this.firstName}`;
  }
};

const jared = Object.create(personPrototype);
jared.firstName = 'Jared';

console.log(jared.greet()); // "Hello, my name is Jared"

// We can build chains
const employeePrototype = Object.create(personPrototype);
employeePrototype.getJobTitle = function() {
  return `My job is ${this.jobTitle}`;
}

const ben = Object.create(employeePrototype);
ben.firstName = 'Ben';
ben.jobTitle = 'Developer';

console.log(ben.greet());       // "Hello, my name is Ben" (from personPrototype)
console.log(ben.getJobTitle()); // "My job is Developer" (from employeePrototype)

// You can inspect the chain
console.log(Object.getPrototypeOf(ben) === employeePrototype); // true
console.log(Object.getPrototypeOf(employeePrototype) === personPrototype); // true

This approach makes the inheritance chain explicit without the indirection of constructor functions.

Test Your Understanding

Let's test your knowledge with a few quick exercises based on the concepts we've covered. Try to predict the output before running the code.

Exercise 1: Property Lookup & Deletion

let animal = {
  jumps: null
};
let rabbit = {
  __proto__: animal,
  jumps: true
};

console.log( rabbit.jumps ); // ? (1)

delete rabbit.jumps;
console.log( rabbit.jumps ); // ? (2)

delete animal.jumps;
console.log( rabbit.jumps ); // ? (3)

Exercise 2: Where Does it Write?

let animal = {
  eat() {
    this.full = true;
  }
};
let rabbit = {
  __proto__: animal
};

rabbit.eat();

// Which object now has the 'full' property? animal or rabbit?
console.log(rabbit.hasOwnProperty('full')); // ?
console.log(animal.hasOwnProperty('full')); // ?

Conclusion

We've peeled back the layers of JavaScript's inheritance model, moving from a simple mystery to a deep, mechanical understanding.

Key Takeaways:

• Prototype Chain: Objects are linked via an internal [[Prototype]] property, forming a chain that is traversed during property lookups.
• Lookup Algorithm: The engine checks for an "own" property first, then moves up the prototype chain until the property is found or the chain ends at null.
• [[Prototype]] vs. .prototype: [[Prototype]] is the internal link on an object. A function's .prototype property is the object that becomes the [[Prototype]] for instances created with new.
• this is Dynamic: An inherited method, when called, has its this value set to the instance calling it, not the prototype where the method resides.
• Object.create(): This provides a direct, clean mechanism for setting an object's prototype at creation, embodying a "purer" form of prototypal inheritance.

What's Next?

Now that you have a solid grasp of how prototypes work under the hood, you are perfectly prepared for our next lesson. We will explore ES6 classes and you will see how the class, extends, and super keywords are essentially "syntactic sugar" that provides a cleaner, more familiar syntax for managing the very same prototype chains we've just demystified.