Inheritance using classes in Javascript - Step-by-Step Execution

Concept Flow - Inheritance using classes

Define Parent Class

↓

Define Child Class extends Parent

↓

Create Child Object

↓

Access Child Method

↓

Access Parent Method via Child

↓

Use Child and Parent Properties

Inheritance lets a child class use properties and methods from a parent class, sharing and extending behavior.

Execution Sample

Javascript

class Animal {
  speak() {
    return 'Animal speaks';
  }
}
class Dog extends Animal {
  speak() {
    return 'Dog barks';
  }
}
const pet = new Dog();
console.log(pet.speak());

This code shows a Dog class inheriting from Animal and overriding the speak method.

Execution Table

Step	Action	Evaluation	Result
1	Define class Animal with method speak	Animal.speak() returns 'Animal speaks'	Animal class ready
2	Define class Dog extends Animal with method speak	Dog.speak() returns 'Dog barks'	Dog class ready, inherits Animal
3	Create new Dog object pet	pet is instance of Dog	pet created
4	Call pet.speak()	Dog's speak method overrides Animal's	'Dog barks' returned
5	If Dog did not override speak, Animal's speak would run	Not applicable here	N/A

💡 Execution ends after pet.speak() returns 'Dog barks'

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
pet	undefined	Dog instance created	pet.speak() method called	pet remains Dog instance

Key Moments - 2 Insights

Why does pet.speak() call Dog's method, not Animal's?

Because Dog class overrides speak(), so pet uses Dog's version (see execution_table step 4).

What if Dog did not have speak() method?

Then pet.speak() would use Animal's speak() method inherited (see execution_table step 5).

Visual Quiz - 3 Questions

Look at the execution table, what does pet.speak() return at step 4?

A 'Animal speaks'

B undefined

C 'Dog barks'

D Error

💡 Hint

Check execution_table row with Step 4 for pet.speak() result

At which step is the Dog object created?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at execution_table row describing object creation

If Dog did not override speak(), what would pet.speak() return?

A 'Animal speaks'

B undefined

C 'Dog barks'

D Error

💡 Hint

See execution_table step 5 about inherited method usage

Concept Snapshot

class Parent {
  method() {}
}
class Child extends Parent {
  method() {} // overrides
}
const obj = new Child();
obj.method() calls Child's method if overridden,
otherwise Parent's method.

Full Transcript

Inheritance in JavaScript classes means a child class can use and override methods from a parent class. First, we define a parent class Animal with a speak method. Then, we define a Dog class that extends Animal and overrides speak. When we create a Dog object pet and call pet.speak(), it uses Dog's speak method, not Animal's. If Dog did not override speak, pet.speak() would use Animal's method. This shows how inheritance shares behavior but allows customization.

Practice

1.

What does the extends keyword do in JavaScript classes?

easy

A. It makes one class inherit properties and methods from another class.

B. It creates a new instance of a class.

C. It defines a private method inside a class.

D. It deletes a class from memory.

Solution

1. Step 1: Understand the role of extends

   The extends keyword is used to create a child class that inherits from a parent class.

2. Step 2: Identify inheritance behavior

   This means the child class gets all properties and methods of the parent class automatically.

3. Final Answer:

   It makes one class inherit properties and methods from another class. -> Option A

4. Quick Check:

   extends means inheritance [OK]

Hint: Remember: extends means 'inherits from' [OK]

Common Mistakes:

• Confusing extends with creating instances
• Thinking extends deletes classes
• Mixing extends with private methods

2.

Which of the following is the correct syntax to create a child class Dog that inherits from a parent class Animal?

?

easy

A. class Dog extends Animal {}

B. class Dog inherits Animal {}

C. class Dog : Animal {}

D. class Dog Animal extends {}

Solution

1. Step 1: Recall JavaScript inheritance syntax

   JavaScript uses class Child extends Parent {} to inherit.

2. Step 2: Match syntax to options

   Only class Dog extends Animal {} matches the correct syntax: class Dog extends Animal {}.

3. Final Answer:

   class Dog extends Animal {} -> Option A

4. Quick Check:

   Correct syntax uses extends [OK]

Hint: Use 'extends' keyword to inherit classes [OK]

Common Mistakes:

• Using 'inherits' instead of 'extends'
• Using ':' like other languages
• Wrong order of keywords

3.

What will be the output of this code?

class Animal {
  speak() {
    return "Animal sound";
  }
}

class Dog extends Animal {
  speak() {
    return "Bark";
  }
}

const pet = new Dog();
console.log(pet.speak());

medium

A. undefined

B. "Animal sound"

C. "Bark"

D. Error: speak is not a function

Solution

1. Step 1: Understand method overriding in child class

   The Dog class overrides the speak method from Animal to return "Bark".

2. Step 2: Check which method is called

   When pet.speak() is called, it uses the Dog version, so it returns "Bark".

3. Final Answer:

   "Bark" -> Option C

4. Quick Check:

   Child method overrides parent method [OK]

Hint: Child method replaces parent method if same name [OK]

Common Mistakes:

• Expecting parent method output
• Thinking both methods run
• Confusing method names

4.

Find the error in this code and choose the fix:

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name) {
    this.name = name;
  }
}

medium

A. Add extends Animal to Dog class.

B. Add super(name); as the first line in Dog's constructor.

C. Change this.name to super.name in Dog's constructor.

D. Add super(name); as the last line in Dog's constructor.

Solution

1. Step 1: Identify constructor error in child class

   In JavaScript, a child class constructor must call super() before using this.

2. Step 2: Fix by calling super(name);

   Adding super(name); as the first line in Dog's constructor calls the parent constructor properly.

3. Final Answer:

   Add super(name); as the first line in Dog's constructor. -> Option B

4. Quick Check:

   Call super() before this in child constructor [OK]

Hint: Always call super() first in child constructor [OK]

Common Mistakes:

• Using this before super()
• Forgetting to call super()
• Trying to access super.name directly

5.

Given these classes, what will console.log(cat.describe()); print?

class Animal {
  constructor(name) {
    this.name = name;
  }
  describe() {
    return `This is an animal named ${this.name}`;
  }
}

class Cat extends Animal {
  constructor(name, color) {
    super(name);
    this.color = color;
  }
  describe() {
    return `${super.describe()} and its color is ${this.color}`;
  }
}

const cat = new Cat("Whiskers", "black");
console.log(cat.describe());

hard

A. "This is an animal named Whiskers"

B. Error: super.describe is not a function

C. "This is a black animal named Whiskers"

D. "This is an animal named Whiskers and its color is black"

Solution

1. Step 1: Understand super method call in child

   The Cat class calls super.describe() to get the parent description.

2. Step 2: Combine parent and child descriptions

   The child adds its color info, so the full string is "This is an animal named Whiskers and its color is black".

3. Final Answer:

   "This is an animal named Whiskers and its color is black" -> Option D

4. Quick Check:

   super.method() adds parent info in child method [OK]

Hint: Use super.method() to extend parent method output [OK]

Common Mistakes:

• Ignoring super.describe() call
• Expecting only child or parent text
• Thinking super.describe is undefined