How Child Classes and Inheritance Work in JavaScript

How Child Classes and Inheritance Work in JavaScript

An introduction to JavaScript classes, I am going to cover child classes, inheritance, the extends, and the super keywords. JavaScript Classes are templates for JavaScript Objects.

Hi y’all, I am back today with the second part of my introduction to JavaScript Classes.

Today, I am going to cover child classes, inheritance, the extends, and the super keywords. So, without further ado, let’s get this party started.

In my last post, I compared JavaScript classes to Chipotle. As a matter of fact, I said “I like to think of a class as being like Chipotle; people go in, and they come out with burritos.” Well as you probably know, you are not limited to burritos at Chipotle. You can also get a burrito bowl, tacos, or a taco salad, but all of those meals still have the same options as a burrito when it comes to ingredients.

Image for post

So, to revise my previous statement, I like to think of a “parent class” as being like Chipotle; people go in, and they come out with meals. What about those meals, though? They may be different from one another, but they are made out of the same ingredients.

Image for post

Image for post

In order to create a Parent class, the first thing that we need to consider is what all of the meals all have in common. Whether you are getting a burrito, tacos, a burrito bowl, or a taco salad, they all share the following options: lettuce, beans, protein, veggies, cheese, guac, sour cream, and salsa….right? Since you can make a taco salad without adding to those ingredients, let’s make our parent class a taco salad.

Step 1: Class declaration

Image for post

Now that we have the TacoSalad class declared, we want to add the constructor method. Remember, the constructor method is like your burrito artist (in this case your meal artist), which means that we need to give it the parameters of all the ingredients to make a taco salad, like so.

Step 2: Add a constructor & methods

Image for post

Now we can make a salad with any ingredients that we choose, that wasn’t so bad, right? But, what if a customer comes in and they want a burrito bowl? We could create a new class called BurritoBowl, but a burrito bowl and a taco salad seem pretty similar. That would be kind of like having an ingredient station for taco salads, one for burrito bowls, one for tacos, and one for burritos.

Image for post

That would be pretty redundant right? Instead we could add rice to the ingredient station and add it to the meal only when it’s needed. This would be a good opportunity to use the extends keyword; we can use extends to create a class that is a child class of TacoSalad. The child class will inherit all of the key-value pairs and methods of the parent…kinda like I inherited my dad’s hairline. Let’s take a look at how this works.

programming javascript web-development developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

Top 10 Web Development Trends in 2020 | Web Development Skills

Top 10 Web Development Trends in 2020 will provide you with a detailed list of the trends which are currently being noticed. Upskilling to these trends will help you in landing onto better jobs in 2020-2021.