Prototypes & Prototypal Inheritance in JS

Unlock the foundation of JavaScript's object-oriented nature by mastering how objects inherit and share functionality.

📜

Welcome! Let's uncover JavaScript's core inheritance model: prototypes.

/* The journey into prototypes begins... */

What is an Object's Prototype?

In JavaScript, almost every object has a hidden, internal property called `[[Prototype]]`. This property is a link to another object. When you try to access a property on an object, if the property isn't found, JavaScript's engine follows this link to the object's prototype to look for it there.

The Constructor's `prototype` Property

Functions used as constructors (with the `new` keyword) have a special property called `prototype`. This is not the object's own prototype, but rather the object that will be assigned as the prototype for all instances created by that constructor. It's the blueprint for inheritance.

The Prototype Chain

This linking creates a prototype chain. If a property isn't found on an object, the search continues up the chain to its prototype, and then to that object's prototype, and so on, until the property is found or the end of the chain is reached (which is `null`). This is how JavaScript implements inheritance.

Inheritance in Action

By adding methods and properties to a constructor's `prototype`, you make them available to all instances of that constructor. This is incredibly efficient because the method exists in only one place in memory, but every instance can access it through the prototype chain. This is the foundation of code reuse in JavaScript.

Practice Zone

Interactive Test 1: Match the Concepts

Drag the JavaScript property to its correct description.

Arrastra en el orden correspondiente.

Arrastra las opciones:

`__proto__`

`prototype`

Completa el código:

A link on an instance to its prototype object.______

A property on a constructor function that serves as a blueprint.______

🔒 Unlock with Premium

Interactive Test 2: Complete the Code

Rellena los huecos en cada casilla.

function Animal(name) {
  this.name = name;
}

// Add a method to the blueprint
Animal..speak = function() {
  console.log(this.name + ' makes a sound.');
}

// Create a new instance
const dog =  Animal('Rex');
dog.speak();

🔒 Unlock with Premium

Practice Example: Code Editor

Create a `Vehicle` constructor that takes a `type`. Add a `startEngine` method to its prototype that logs "The type engine starts.". Then, create an instance called `car`.

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

function Vehicle(type) {
  this.type = type;
}

Vehicle.prototype.startEngine = function() {
  console.log('The ' + this.type + ' engine starts.');
};

const car = new Vehicle('car');
car.startEngine();

🔒 Unlock with Premium

Knowledge Check

When you create an object using `new MyConstructor()`, where does the new object's `__proto__` property point to?

🔒 Unlock with Premium

Prototypes vs. Classes: A Modern View

While modern JavaScript has `class` syntax, it's crucial to understand that it is primarily "syntactic sugar" over the same prototypal inheritance mechanism we've been discussing.

1. The `class` Syntax

ES6 classes provide a cleaner, more familiar syntax for creating objects and handling inheritance. However, under the hood, it's all prototypes.

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() { /*...*/ }
}

This `speak` method is automatically placed on `Animal.prototype`.

2. "De-sugaring" a Class

The `class` above is roughly equivalent to this constructor function and prototype assignment:

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  /*...*/
};

3. Another Way: `Object.create()`

For more direct control over the prototype chain, you can use `Object.create()`. This method creates a new object, using an existing object as the prototype of the new object.

const animalPrototype = {
  speak: function() { /*...*/ }
};

const dog = Object.create(animalPrototype);

Practical Takeaway: Whether you use `class` syntax or constructor functions, understanding the underlying prototype chain is essential for debugging, performance optimization, and mastering advanced JavaScript concepts.

JavaScript Prototype Glossary

Prototype: An object from which other objects inherit properties. It acts as a template or blueprint.
[[Prototype]] / `__proto__`: The internal (and legacy accessor) property on an object that holds the link to its prototype in the chain.
Constructor.prototype: A special property on a constructor function. The object it points to becomes the prototype for all instances created with that constructor.
Prototype Chain: The series of linked objects that are traversed upwards to find a requested property or method.
Constructor Function: A regular function that is intended to be called with the `new` keyword to create and initialize object instances.
`instanceof` operator: Checks if the `prototype` property of a constructor appears anywhere in the prototype chain of an object.