Prototypal inheritance is a feature in JavaScript where an object can inherit properties from another object. This is different from class-based inheritance, often used in other programming languages, where a class (which is like a blueprint for creating objects) can inherit properties and methods from another class. In JavaScript, if you try to access a property that does not exist in an object, JavaScript will try to find this property in the object's prototype (the object it inherited its properties from).

The Prototype Chain

When we use prototypal inheritance, we create a chain of objects known as the prototype chain. When a property is accessed, JavaScript starts from the original object and goes up the chain until it either finds the requested property or it reaches an object with a null prototype - this ends the chain. If the property was not on the chain, 'undefined' is returned.

Creating Prototypal Inheritance

The most common way to implement prototypal inheritance is by using the 'new' keyword. When you create a new object using a constructor function, the new object automatically inherits from the object located in the 'prototype' property of the constructor function.

function Car(make, model) {
  this.make = make;
  this.model = model;
}

Car.prototype.startEngine = function() {
  return 'Engine of '+ this.make+' '+this.model + ' is started';
};

var myCar = new Car('Toyota', 'Corolla');
console.log(myCar.startEngine()); // Engine of Toyota Corolla is started

Imagine you are building LEGO toys. You built a car with a nice blue brick. Then, you want to build a truck, but you want it to be like the car - also with the blue brick. Instead of building it all over again, you just take the car and add some extra bricks to make it a truck. That thing you did is like inheritance in programming - you took something that already existed (the car) and added some more things to make something new (the truck).

What is Prototypal Inheritance?

In JavaScript, this LEGO trick is called Prototypal Inheritance. This means each LEGO (JavaScript object) can 'inherit' properties and methods (bricks and instructions) from another LEGO (another JavaScript object).

How does Prototypal Inheritance work in JavaScript?

Every time you create a toy, you use a 'prototype'. Just like when you first made the car, and then used it as a 'prototype' to make a truck. In JavaScript, when you create an object, it automatically gets a special hidden property, which is the prototype of that object! This prototype has its own prototypes, and so on, until an object reaches null. Explained simply, JavaScript objects have a link to other objects. They can use their properties and methods as if they were their own.

JavaScript Code Example

In the code example, we first created a car object with properties 'wheels' and 'color'. Then, we created a truck object that inherited from the car, meaning it also has 4 wheels and blue color! Just like with the LEGO. If you try to use the 'wheels' or 'color' property of the truck, JavaScript will check if the truck has these properties. If it doesn't, JavaScript will look at the prototype of the truck (which is the car) and use the property from there.

let car = {
    wheels: 4,
    color: 'blue'
};

let truck = Object.create(car);

console.log(truck.wheels);  // prints 4
console.log(truck.color);   // prints 'blue'

Conclusion for Prototypal Inheritance

So, Prototypal Inheritance in JavaScript is like using older toys as models to build new ones! It’s really fun and indeed magical!