JavaScript prototype inheritance

JavaScript prototype inheritance is a feature of the JavaScript programming language that allows objects to inherit properties and methods from other objects. It is based on the concept of prototypes, where each object has an internal link to another object called its prototype.

When you create an object in JavaScript, it is associated with a prototype. The prototype is an object that the new object inherits properties and methods from. If a property or method is not found on the object itself, JavaScript looks for it in the prototype chain until it reaches the top-level prototype, typically the Object.prototype.

To establish prototype inheritance, you can use the prototype property of a constructor function or the Object.create() method. Let’s take a look at both approaches:

1. Constructor Function and Prototype Property:

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

Person.prototype.sayHello = function() {
  console.log('Hello, my name is ' + this.name);
};

var john = new Person('John');
john.sayHello(); // Output: Hello, my name is John

In this example, the Person function acts as a constructor. The sayHello method is added to the Person.prototype object, and any instances created using the Person constructor will have access to the sayHello method through the prototype chain.

2. Object.create() Method:

var personPrototype = {
  sayHello: function() {
    console.log('Hello, my name is ' + this.name);
  }
};

var john = Object.create(personPrototype);
john.name = 'John';
john.sayHello(); // Output: Hello, my name is John

In this example, we create a personPrototype object that contains the sayHello method. Then, we use Object.create() to create a new object john with personPrototype as its prototype.

JavaScript prototype inheritance example

The syntax for setting up JavaScript prototype inheritance involves creating constructor functions and manipulating the prototype chain. Here’s a breakdown of the syntax:

1. Define the Parent Constructor Function:

function Parent() {
  // Parent properties and methods
}

2. Add Methods and Properties to the Parent’s Prototype:

Parent.prototype.methodName = function() {
  // Method implementation
};

3. Define the Child Constructor Function:

function Child() {
  // Child properties and methods
}

4. Set the Child’s Prototype to an Instance of the Parent:

Child.prototype = Object.create(Parent.prototype);

5. Reset the Constructor Property of the Child’s Prototype:

Child.prototype.constructor = Child;

6. Add Methods and Properties to the Child’s Prototype:

Child.prototype.methodName = function() {
  // Method implementation
};

Let’s put it all together in an example:

// Parent constructor function
function Animal(name) {
  this.name = name;
}

// Method added to the parent's prototype
Animal.prototype.sayName = function() {
  console.log('My name is ' + this.name);
};

// Child constructor function
function Dog(name, breed) {
  Animal.call(this, name); // Call parent constructor with 'this' context
  this.breed = breed;
}

// Set up prototype chain
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Method added to the child's prototype
Dog.prototype.bark = function() {
  console.log('Woof!');
};

// Create instances
var animal = new Animal('Generic Animal');
animal.sayName();

var dog = new Dog('Buddy', 'Golden Retriever');
dog.sayName(); 
dog.bark();

Output:

This concept forms the foundation of object-oriented programming in JavaScript, allowing for code organization, reusability, and the creation of class-like structures. Discover how to leverage prototype inheritance to build flexible and maintainable JavaScript applications.

Comment if you have any doubts or suggestions on this Js Inheritance topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version