How Does the Prototype and Prototype Chain Work in JavaScript?

Prototype and prototype chain are fundamental to JavaScript's object-oriented programming. The concepts are crucial for understanding relationships between objects and inheritance mechanisms in JavaScript.

Prototype

In JavaScript, every function has a property named prototype that is created when the function is defined. This property is an object that contains properties and methods shared by all instances of a specific type. Meaning you can add or share functionality using prototypes without redefining it in each instance.

For example, suppose we define a constructor function:

javascript
function Person(name) {
  this.name = name;
}

Person.prototype.sayName = function() {
  console.log(this.name);
};

Here are two instances created using the Person constructor:

javascript
var person1 = new Person("Alice");
var person2 = new Person("Bob");

Here, person1 and person2 do not have their own sayName method. When you call person1.sayName(), JavaScript will look for this method in person1. Since person1 does not have it, it will search through the prototype chain to find sayName on Person.prototype. This means person1 and person2 actually share the sayName method on Person.prototype.

Prototype Chain

The prototype chain is the mechanism JavaScript uses for inheritance. Every object has an internal link to another object, which is its prototype. This prototype object itself has a prototype, and so on, until an object's prototype is null. According to the specification, null has no prototype, which is typically considered the end of the prototype chain.

When accessing a property of an object, if the object itself does not have it, the JavaScript engine will search upward along the prototype chain until it finds the property or reaches the end of the chain.

Continuing with the previous example, we can see how the prototype chain works:

javascript
person1.sayName(); // Output: Alice

1. First, the JavaScript engine checks if person1 itself has the sayName property.
2. Since person1 does not have it, the engine then checks person1's prototype (i.e., Person.prototype).
3. Person.prototype has the sayName method, so it is called.

If an object's prototype is another object, then the second object's properties and methods can also be accessed by the first object. This process can continue, forming a 'chain'.

Implementing Inheritance via Prototype Chain

We can implement inheritance using the prototype chain. For example, if we have an Employee constructor function that should inherit from Person:

javascript
function Employee(name, title) {
  Person.call(this, name); // To inherit properties
  this.title = title;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.sayTitle = function() {
  console.log(this.title);
};

var employee1 = new Employee("Charlie", "Developer");

employee1.sayName(); // Output: Charlie
employee1.sayTitle(); // Output: Developer

Here, Employee.prototype is set to a new object whose prototype is Person.prototype. This means all instances of Employee inherit the methods from Person. We also set the Employee.prototype.constructor property to ensure it points to the correct constructor.

Through the above code, we create an instance employee1 of Employee that can call the inherited sayName method from Person and also has its own specific sayTitle method.