Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Challenge: Class Inheritance with Extends and Using Super | Classes
Advanced JavaScript Mastery
course content

Course Content

Advanced JavaScript Mastery

Advanced JavaScript Mastery

1. Classes
Welcome to the CourseClass DeclarationChallenge: Building a Class Class MethodsChallenge: Adding Methods to a ClassParameter ObjectPrivate PropertiesChallenge: Implementing Private Properties in a ClassGetters and SettersChallenge: Managing Properties with Getters and SettersStatic PropertiesStatic MethodsChallenge: Using Static Properties and Methods in a ClassInheritance with extends and Using super()Challenge: Class Inheritance with Extends and Using Super
2. DOM Manipulation
What is the DOM?Querying the DOMChallenge: Querying the DOMUnderstanding the DOM HierarchyChallenge: DOM HierarchyDOM PropertiesWorking with Element AttributesChallenge: Working with Element Properties and AttributesAdding ElementsRemoving ElementsChallenge: Adding and Removing ElementsModifying Element StylesChallenge: Modifying Element Styles
3. Events and Event Handling
Introduction to Events and Event ListenersThe Event ObjectChallenge: Events and Event ListenersEvent Propagation and DelegationChallenge: Event Propagation and DelegationKeyboard and Mouse EventsManaging Event Listeners
4. Asynchronous JavaScript and APIs
Introduction to Asynchronous JavaScriptCallbacksPromisesAsync/AwaitWorking with APIsPractical API IntegrationChallenge: Working with APIWorking with Third-Party LibrariesChallenge: Working with Third-Party LibrariesHandling Multiple Asynchronous Requests

bookChallenge: Class Inheritance with Extends and Using Super

Task

You're working on a transportation management system that tracks different types of vehicles. Each vehicle has a make, model, and year. For electric vehicles, you also need to track the batteryCapacity. You'll use inheritance to extend a general Vehicle class for specific electric vehicles.

  1. Create an ElectricVehicle class that extends Vehicle;
  2. The ElectricVehicle constructor should accept make, model, year, and batteryCapacity;
  3. Use super() to initialize make, model, and year in the parent class;
  4. Add a getDetails method to ElectricVehicle that overrides Vehicle's getDetails method. It should call super.getDetails() and add information about batteryCapacity. The format should be: "{make} {model} ({year}) with a battery capacity of {batteryCapacity} kWh.".

              
12345678910111213141516171819202122232425262728293031

            
class Vehicle {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  getDetails() {
    return `${this.make} ${this.model} (${this.year})`;
  }
}

class ElectricVehicle _____ _____ {
  _____(make, model, year, _____) {
    _____(_____, _____, _____);
    this.batteryCapacity = batteryCapacity;
  }

  _____() {
    return `${super._____} with a battery capacity of ${
      _____._____
    } kWh.`;
  }
}

// Testing
const vehicle = new Vehicle('Toyota', 'Camry', 2020);
console.log(vehicle.getDetails()); // Expected: Toyota Camry (2020)

const electricVehicle = new ElectricVehicle('Tesla', 'Model 3', 2021, 75);
console.log(electricVehicle.getDetails()); // Expected: Tesla Model 3 (2021) with a battery capacity of 75 kWh.
copy
  • Define a class ElectricVehicle that extends Vehicle;
  • In the ElectricVehicle constructor, add a parameter batteryCapacity after make, model, and year;
  • Use super(make, model, year) to call the parent class's constructor and initialize make, model, and year;
  • Assign batteryCapacity to a property in ElectricVehicle;
  • Define a getDetails method in ElectricVehicle that overrides Vehicle's getDetails method;
  • Inside getDetails, use super.getDetails() to get the parent class details, then add the battery capacity information to the return string.

              
12345678910111213141516171819202122232425262728293031

            
class Vehicle {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }

  getDetails() {
    return `${this.make} ${this.model} (${this.year})`;
  }
}

class ElectricVehicle extends Vehicle {
  constructor(make, model, year, batteryCapacity) {
    super(make, model, year);
    this.batteryCapacity = batteryCapacity;
  }

  getDetails() {
    return `${super.getDetails()} with a battery capacity of ${
      this.batteryCapacity
    } kWh.`;
  }
}

// Testing
const vehicle = new Vehicle('Toyota', 'Camry', 2020);
console.log(vehicle.getDetails()); // Output: Toyota Camry (2020)

const electricVehicle = new ElectricVehicle('Tesla', 'Model 3', 2021, 75);
console.log(electricVehicle.getDetails()); // Output: Tesla Model 3 (2021) with a battery capacity of 75 kWh.
copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 1. Chapter 15
some-alt