Lesson 3
Inheritance in JavaScript
Inheritance in JavaScript

Welcome back! Now that you have a solid understanding of classes and objects in JavaScript, it's time to delve deeper into inheritance. This is a natural progression in our journey into object-oriented programming (OOP) using JavaScript's unique syntax and features.

Inheritance in JavaScript allows you to create a new class that reuses the behavior of an existing class via prototypes. This facilitates code reuse, extends object functionalities, and creates easily manageable and understandable programs. Let's dive in!

What We'll Cover

In this lesson, you'll understand how to leverage inheritance in JavaScript. We'll cover:

  1. What Inheritance Is in JavaScript
  2. How to Implement Inheritance Using ES6 Classes
  3. Benefits of Using Inheritance

You'll also learn about the prototype chain and how to manage inheritance using classes and constructors.

What Inheritance Is

Inheritance in JavaScript is a mechanism to create a hierarchical class structure through a prototype chain, whereby one object inherits the properties and methods of another. To better understand this, we’ll use an example involving a Person class as the base class and a Student class as the derived class. This will help you see how properties and methods are inherited and extended in JavaScript.

Base Class: Person

Let’s start by defining a Person class using ES6 class syntax to act as the base class in our example:

JavaScript
1// Define the base class Person with name and age properties 2class Person { 3 constructor(name, age) { 4 this.name = name; 5 this.age = age; 6 } 7 8 // Method to display name and age 9 display() { 10 console.log(`Name: ${this.name}, Age: ${this.age}`); 11 } 12}

In this snippet, the Person class is defined with attributes name and age. The constructor initializes these attributes, and a display method is used to print the details.

Derived Class: Student

Now, we’ll create a Student class that extends the Person class:

JavaScript
1// Define the derived class Student, extending from Person 2class Student extends Person { 3 constructor(name, age, major) { 4 super(name, age); 5 this.major = major; 6 } 7 8 // Method to display major of the student 9 displayMajor() { 10 console.log(`Major: ${this.major}`); 11 } 12}

In the Student class, we use the extends keyword to inherit from Person. The constructor uses the super function to call the base class constructor, initializing the inherited properties. The Student class adds a new attribute major and a displayMajor method specific to its class.

Using Inheritance in JavaScript

Here’s how we can create and use these classes in JavaScript:

JavaScript
1// Create a Student object and display its details 2const student = new Student("Bob", 25, "Computer Science"); 3student.display(); // Calls the display method from the Person class 4student.displayMajor(); // Calls the displayMajor method from the Student class

In this example, we create an instance of Student and use it to call methods inherited from the Person class as well as those unique to the Student class.

Key Concepts of JavaScript Inheritance

Let's explore some important aspects of JavaScript inheritance to keep in mind when designing class hierarchies:

  • Prototype Chain: JavaScript uses prototypes for inheritance. Every object has a [[Prototype]], and properties and methods are shared via this prototype chain, allowing for inheritance. We will explore examples of prototype usage later in this course.

  • Constructor Functions and ES6 Classes: Before ES6, inheritance was commonly implemented using constructor functions and prototypes. Today, ES6 classes provide syntactic sugar to achieve the same effect with clearer semantics.

  • Single Inheritance: While class inheritance in JavaScript via extends resembles single inheritance, JavaScript remains flexible with prototypes, which can be dynamic.

  • Mixins: JavaScript allows for behavior similar to multiple inheritance using mixins — functions that add functionality to existing classes.

Understanding these concepts helps you leverage JavaScript's flexibility in designing robust and maintainable applications.

Why It Matters

Inheritance in JavaScript offers several benefits:

  1. Code Reusability: It facilitates the reuse of code, simplifying maintenance and reducing duplication.
  2. Extension: You can easily extend existing functionalities by adding new features without modifying the base class.
  3. Hierarchy and Flexibility: Inheritance helps organize code in a hierarchical manner, which mirrors real-world relationships and enhances code readability and efficiency.

Inheritance is crucial in OOP, enabling you to create flexible and scalable applications. By mastering inheritance in JavaScript, you'll be well-equipped to design sophisticated object-oriented systems.

Ready to put theory into practice? Let's proceed and build on what we've learned!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.