Inheritance & Prototype Chain in Javascript

JavaScript inheritance and the prototype chain

JavaScript, a versatile and widely used programming language, offers a variety of mechanisms for object-oriented programming. Inheritance is a key concept in object-oriented programming that allows you to create new objects based on existing ones.

Inheritance is achieved through the prototype chain. In this article, we will explore the world of JavaScript inheritance, understand how the prototype chain works, and implement it in practical scenarios.

Understanding inheritance in JavaScript

Inheritance is the process by which one object inherits the properties and methods of another object. It promotes code reuse and abstraction. Inheritance in JavaScript is based on prototypes, which means that objects can inherit properties and methods directly from other objects.

Prototype chain

At the heart of JavaScript's inheritance model is the prototype chain. Every object in JavaScript has a prototype, which is another object that inherits properties and methods.

This chain of inheritance can extend to several levels, forming a chain of prototypes. When you access a property or method in an object, JavaScript looks for it in the object itself, and if it is not found, it goes through its prototype and so on until it reaches the end of the chain. continue his search.

Let's move on to some practical examples to better understand prototype chaining and inheritance in JavaScript.

Create constructors and prototypes

First, we will create a constructor function for the "Private" object and define its prototype:

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

// Define the method in the prototype
person.prototype.sayHello = function() {
  console.log("Hello, my name is ${this name} and I am ${this age}.");
};

Here Identity is a constructor function that takes name and age as parameters and assigns to the created object. We also added a sayHello method to the Private prototype.

Inherited from the "Private" prototype.

Now create a new Student constructor function that inherits from the Private prototype:

function Student(name, age, student id) {
  // Call the parent constructor (Private) with context 'this'
  Person.call(this, name, age);

  // Additional properties for students
  this.studentId = studentId;
}

// Build prototype chain - Inherit from prototype Adam
Student.prototype = Object.create(Person.prototype);

// Reset constructor properties
Student.prototype.constructor = Student;

In this example, we create a constructor function "Student" that receives additional information such as "StudentId". To make sure that the Student inherits properties and methods from Person, we call the Person constructor using Person.call (this is name, age) inside the Student constructor. We then set up the prototype chain by creating a new object that inherits from Person.prototype using Object.create(). Finally, we reset the constructor'' property to point toStudent'' because it was overwritten when we built the prototype chain.

Added custom method to "Student".

Let's add a special Student method:

student.prototype.study = function (subject) {
  console.log(`${this.name${{Exploring topic.');
};

Now, the Student instance can access sayHello() from Person and study , which is specific to Student.

Create an example

Now, create "Personal" and "Student" examples to see how inheritance works:

const person1 = new Person( 'Alice', 30);
const student1 = new Student ( 'Bob' , 20 , 'S12345' );

person1.sayHello(); // Output: Hi, my name is Alice and I am 30 years old.
student1.sayHello(); // Output: Hi, my name is Bob and I'm 20 years old.
student1.study('Math'); // Output: Bob studied Mathematics.

As shown, student1 inherits the sayHello () method from the Person prototype and can also access the read () method defined in the prototype itself.

The results

JavaScript inheritance, facilitated by the prototype chain, allows you to create complex and structured code by reusing and extending existing objects. Understanding how the prototype chain works and how to implement inheritance is essential to writing JavaScript code efficiently and sustainably. Whether you're building a simple web application or a complex software system, mastering JavaScript's legacy mechanisms will improve your programming skills.

Comments

[overFlow]

Another hot one !! It needs more examples for us to practice. Because it’s one of the most challenging topics