Method overriding in Javascript - Step-by-Step Execution

Concept Flow - Method overriding

Define Parent Class with method

↓

Define Child Class overriding method

↓

Create Child instance

↓

Call method on Child instance

↓

Child's method runs, not Parent's

↓

Output result

Method overriding happens when a child class provides its own version of a method already defined in its parent class. When called on the child, the child's method runs.

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 overriding the speak method of its parent Animal class. Calling speak on Dog runs Dog's version.

Execution Table

Step	Action	Evaluation	Result
1	Define class Animal with speak method	(new Animal()).speak()	Returns 'Animal speaks'
2	Define class Dog extending Animal, override speak	(new Dog()).speak()	Returns 'Dog barks'
3	Create instance pet of Dog	pet = new Dog()	pet is Dog instance
4	Call pet.speak()	pet.speak()	Runs Dog.speak(), returns 'Dog barks'
5	Output result	console.log output	'Dog barks' printed

💡 Execution stops after printing overridden method output from Dog instance

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
pet	undefined	Dog instance created	Dog instance	Dog instance

Key Moments - 2 Insights

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

Because Dog overrides speak(), so calling speak() on a Dog instance uses Dog's version (see execution_table step 4).

What if Dog did not override speak()?

Then pet.speak() would run Animal's speak() method, since Dog inherits it (not shown in table but implied).

Visual Quiz - 3 Questions

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

A "Animal speaks"

B "Dog barks"

C "pet speaks"

D "undefined"

💡 Hint

Check execution_table row with Step 4, Result column

At which step is the Dog instance created?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at execution_table row describing instance creation

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

A "Animal speaks"

B "Dog barks"

C "undefined"

D Error

💡 Hint

Recall inheritance behavior explained in key_moments and implied in execution_table

Concept Snapshot

Method overriding lets a child class replace a parent's method.
Syntax: child class defines method with same name.
Calling method on child instance runs child's version.
If no override, parent's method runs.
Used to customize behavior in subclasses.

Full Transcript

Method overriding in JavaScript means a child class provides its own version of a method already defined in its parent class. In the example, Animal has a speak method returning 'Animal speaks'. Dog extends Animal and overrides speak to return 'Dog barks'. When we create a Dog instance pet and call pet.speak(), the Dog's speak method runs, printing 'Dog barks'. This shows how overriding changes behavior for child instances. If Dog did not override speak, pet.speak() would run Animal's method instead. This is useful to customize or extend behavior in subclasses while keeping the same method name.