**Course Title:** Modern JavaScript Programming: From Fundamentals to Full-Stack Development **Section Title:** JavaScript Classes and OOP **Topic:** Create a class-based system with inheritance, including methods and properties.(Lab topic) **Introduction** In this lab topic, we'll explore how to create a class-based system with inheritance in JavaScript. We'll learn how to define classes, inherit properties and methods from parent classes, and create a hierarchical structure of classes. By the end of this topic, you'll be able to design and implement a class-based system using JavaScript classes. **Defining Classes and Inheritance** To define a class in JavaScript, we use the `class` keyword followed by the name of the class. For example: ```javascript class Animal { constructor(name, age) { this.name = name; this.age = age; } speak() { console.log('The animal speaks'); } } ``` To inherit from a parent class, we use the `extends` keyword followed by the name of the parent class. For example: ```javascript class Dog extends Animal { constructor(name, age, breed) { super(name, age); this.breed = breed; } bark() { console.log('The dog barks'); } } ``` In the above example, the `Dog` class inherits the properties and methods of the `Animal` class using the `extends` keyword. **Methods and Properties** Methods are functions that are defined inside a class, while properties are variables that are defined inside a class. In JavaScript, we can define methods and properties using the following syntax: ```javascript class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old`); } get ageInYears() { return this.age; } set ageInYears(value) { this.age = value; } } ``` In the above example, we define a `Person` class with a `greet` method and `ageInYears` property. **Inheritance and Polymorphism** Inheritance allows us to create a hierarchical structure of classes, where a child class inherits the properties and methods of a parent class. Polymorphism allows us to override the methods of a parent class in a child class. For example: ```javascript class Animal { speak() { console.log('The animal speaks'); } } class Dog extends Animal { speak() { console.log('The dog barks'); } } class Cat extends Animal { speak() { console.log('The cat meows'); } } ``` In the above example, we define an `Animal` class with a `speak` method, which is overridden in the `Dog` and `Cat` classes. **Lab Exercise** Create a class-based system with inheritance using JavaScript classes. Define a `Vehicle` class with properties for `make`, `model`, and `year`, and methods for `startEngine` and `accelerate`. Then, create a `Car` class that inherits from the `Vehicle` class and adds properties for `numDoors` and `transmissionType`, and overrides the `accelerate` method. Finally, create a `Truck` class that also inherits from the `Vehicle` class and adds properties for `numWheels` and `cargoCapacity`, and overrides the `startEngine` method. **Example Solution** ```javascript class Vehicle { constructor(make, model, year) { this.make = make; this.model = model; this.year = year; } startEngine() { console.log('The engine is starting'); } accelerate() { console.log('The vehicle is accelerating'); } } class Car extends Vehicle { constructor(make, model, year, numDoors, transmissionType) { super(make, model, year); this.numDoors = numDoors; this.transmissionType = transmissionType; } accelerate() { console.log('The car is accelerating quickly'); } } class Truck extends Vehicle { constructor(make, model, year, numWheels, cargoCapacity) { super(make, model, year); this.numWheels = numWheels; this.cargoCapacity = cargoCapacity; } startEngine() { console.log('The truck engine is starting with a loud roar'); } } ``` **Conclusion** In this lab topic, we learned how to create a class-based system with inheritance using JavaScript classes. We defined classes with properties and methods, and used inheritance to create a hierarchical structure of classes. We also explored polymorphism by overriding methods in child classes. **What's Next?** In the next topic, we'll explore module bundling with Webpack, which will help us manage and package our JavaScript code for deployment. **Leave a Comment or Ask for Help** If you have any questions or need help with this lab topic, please leave a comment below. We'll be happy to help! **External Resources** * [MDN Web Docs: Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) * [W3Schools: JavaScript Classes](https://www.w3schools.com/js/js_classes.asp) Please note that this is a self-contained course material and there are no other discussion boards.