MakeW3web

JavaScript ES6 Classes and Inheritance

JavaScript ES6 introduced classes as a more familiar syntax for working with objects and inheritance. Classes provide a more concise and easy-to-read way to create objects, define their properties and methods, and manage inheritance using the `class` keyword. Under the hood, classes are still based on JavaScript's existing prototype-based inheritance model.

Here's an overview of classes and inheritance in ES6:

  1. Defining classes:

To define a class, use the `class` keyword followed by the class name. The class can contain a special method called the constructor, which is executed when a new object is created from the class. You can also define methods within the class body.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  greet() {
    console.log(`Hello, my name is ${this.firstName} ${this.lastName}.`);
  }
}

const person = new Person("John", "Doe");
person.greet(); // Output: Hello, my name is John Doe.
  1. Inheritance:

Inheritance allows you to create a new class that inherits the properties and methods of an existing class. To create a class that inherits from another class, use the `extends` keyword followed by the parent class name.

class Employee extends Person {
  constructor(firstName, lastName, position) {
    super(firstName, lastName); // Call the parent class constructor
    this.position = position;
  }

  // Override the greet method
  greet() {
    console.log(`Hello, my name is ${this.firstName} ${this.lastName}, and I work as a ${this.position}.`);
  }
}

const employee = new Employee("John", "Doe", "developer");
employee.greet(); // Output: Hello, my name is John Doe, and I work as a developer.

In this example, the `Employee` class inherits from the `Person` class. The `super()` function is used to call the parent class constructor and initialize the `firstName` and `lastName` properties. The `greet` method is overridden in the `Employee` class to provide a custom implementation.

  1. Static methods:

Static methods are methods that belong to the class itself rather than an instance of the class. You can define a static method using the `static` keyword before the method name.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  static createFromFullName(fullName) {
    const [firstName, lastName] = fullName.split(" ");
    return new Person(firstName, lastName);
  }
}

const person = Person.createFromFullName("John Doe");
console.log(person.firstName); // Output: John

In this example, the `createFromFullName` method is a static method that creates a new `Person` object from a full name string.

In summary, JavaScript ES6 classes provide a more familiar and concise syntax for defining objects, their properties, and methods, as well as managing inheritance. Classes make it easier to work with object-oriented programming in JavaScript, while still relying on the existing prototype-based inheritance model.

Was this page helpful?