JavaScript Fundamentals

Class Inheritance

Create specialized classes that inherit from parent classes

Find videos you like?

Save to resource drawer for future reference!

What is Class Inheritance?

Inheritance lets you create a specialized class based on an existing one. The new class gets all properties and methods from the parent, plus its own unique features!

Parent-Child Analogy

Like a child inheriting traits from parents! A "Dog" class can inherit from "Animal" - it gets all Animal features, plus Dog-specific behaviors like barking.

Basic Inheritance with extends

Use extends keyword to inherit from parent class

Parent → Child

// Parent class
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

// Child class inherits from Animal
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Buddy');
dog.speak();  // 'Buddy makes a sound' (inherited)
dog.bark();   // 'Buddy barks!' (own method)

Basic Inheritance Example

Child class inherits from parent

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

super() - Call Parent Constructor

Initialize parent class properties

Calling Parent Constructor

Use super() to call the parent's constructor

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

class Dog extends Animal {
  constructor(name, age, breed) {
    super(name, age);  // Call parent constructor
    this.breed = breed;  // Add child property
  }
}

const dog = new Dog('Buddy', 3, 'Golden Retriever');
console.log(dog.name);   // 'Buddy' (from parent)
console.log(dog.age);    // 3 (from parent)
console.log(dog.breed);  // 'Golden Retriever' (own)

Important: If child has constructor, you must call super() before using this!

super() Examples

Initializing parent and child properties

javascript

code

DarkEditable

// Parent class
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

// Child class
class Employee extends Person {
  constructor(firstName, lastName, jobTitle, salary) {
    super(firstName, lastName);  // Initialize parent properties
    this.jobTitle = jobTitle;    // Child property
    this.salary = salary;        // Child property
  }
  
  getInfo() {
    return `${this.getFullName()} - ${this.jobTitle}`;
  }
}

const emp = new Employee('John', 'Doe', 'Developer', 80000);
console.log(emp.getFullName());  // 'John Doe' (inherited)
console.log(emp.getInfo());      // 'John Doe - Developer'
console.log(emp.salary);         // 80000

// Real-world: Vehicle hierarchy
class Vehicle {
  constructor(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
  }
  
  getInfo() {
    return `${this.year} ${this.make} ${this.model}`;
  }
}

class Car extends Vehicle {
  constructor(make, model, year, doors) {
    super(make, model, year);
    this.doors = doors;
  }
  
  getDetails() {
    return `${this.getInfo()} (${this.doors} doors)`;
  }
}

const car = new Car('Toyota', 'Camry', 2020, 4);
console.log(car.getDetails());
// '2020 Toyota Camry (4 doors)'

Console Output

Click "Run Code" to see output here...

Method Overriding

Replace parent method with child's version

Override Parent Methods

Child class can define its own version of a parent method

class Animal {
  speak() {
    console.log('Animal makes a sound');
  }
}

class Dog extends Animal {
  speak() {
    console.log('Dog barks!');  // Override parent method
  }
}

class Cat extends Animal {
  speak() {
    console.log('Cat meows!');  // Override parent method
  }
}

const animal = new Animal();
const dog = new Dog();
const cat = new Cat();

animal.speak();  // 'Animal makes a sound'
dog.speak();     // 'Dog barks!' (overridden)
cat.speak();     // 'Cat meows!' (overridden)

Method Overriding Examples

Customizing parent methods

javascript

code

DarkEditable

class Shape {
  constructor(name) {
    this.name = name;
  }
  
  getArea() {
    return 0;  // Default implementation
  }
  
  getInfo() {
    return `${this.name}: Area = ${this.getArea()}`;
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super('Rectangle');
    this.width = width;
    this.height = height;
  }
  
  // Override getArea()
  getArea() {
    return this.width * this.height;
  }
}

class Circle extends Shape {
  constructor(radius) {
    super('Circle');
    this.radius = radius;
  }
  
  // Override getArea()
  getArea() {
    return Math.PI * this.radius ** 2;
  }
}

const rect = new Rectangle(5, 10);
const circle = new Circle(7);

console.log(rect.getInfo());
// 'Rectangle: Area = 50'

console.log(circle.getInfo());
// 'Circle: Area = 153.93...'

// Real-world: Employee types
class Employee {
  constructor(name, baseSalary) {
    this.name = name;
    this.baseSalary = baseSalary;
  }
  
  getSalary() {
    return this.baseSalary;
  }
}

class Manager extends Employee {
  constructor(name, baseSalary, bonus) {
    super(name, baseSalary);
    this.bonus = bonus;
  }
  
  // Override getSalary()
  getSalary() {
    return this.baseSalary + this.bonus;
  }
}

const emp = new Employee('John', 50000);
const mgr = new Manager('Jane', 60000, 10000);

console.log(emp.getSalary());  // 50000
console.log(mgr.getSalary());  // 70000 (overridden)

Console Output

Click "Run Code" to see output here...

super.method() - Call Parent Method

Extend parent method instead of replacing

Extend Parent Behavior

Call parent method and add child behavior

class Animal {
  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  speak() {
    super.speak();  // Call parent method first
    console.log('Woof woof!');  // Then add child behavior
  }
}

const dog = new Dog();
dog.name = 'Buddy';
dog.speak();
// 'Buddy makes a sound' (parent)
// 'Woof woof!' (child)

super.method() Examples

Extending parent methods

javascript

code

DarkEditable

class Person {
  constructor(name) {
    this.name = name;
  }
  
  introduce() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
  
  introduce() {
    super.introduce();  // Call parent method
    console.log(`I'm in grade ${this.grade}`);  // Add more info
  }
}

const student = new Student('Alice', 10);
student.introduce();
// 'Hi, I'm Alice' (from parent)
// 'I'm in grade 10' (from child)

// Real-world: Logger hierarchy
class Logger {
  log(message) {
    console.log(`[${new Date().toISOString()}] ${message}`);
  }
}

class ErrorLogger extends Logger {
  log(message) {
    super.log('ERROR: ' + message);  // Call parent with prefix
    // Could also save to error log file
  }
}

const logger = new Logger();
const errorLogger = new ErrorLogger();

logger.log('Normal message');
// '[2024-12-13...] Normal message'

errorLogger.log('Something went wrong');
// '[2024-12-13...] ERROR: Something went wrong'

// Real-world: Extended functionality
class BankAccount {
  constructor(balance) {
    this.balance = balance;
  }
  
  withdraw(amount) {
    this.balance -= amount;
    console.log(`Withdrew $${amount}`);
  }
}

class SavingsAccount extends BankAccount {
  constructor(balance, interestRate) {
    super(balance);
    this.interestRate = interestRate;
  }
  
  withdraw(amount) {
    if (this.balance - amount < 100) {
      console.log('Must maintain minimum $100');
      return;
    }
    super.withdraw(amount);  // Call parent withdraw
  }
}

const savings = new SavingsAccount(500, 0.02);
savings.withdraw(450);  // 'Must maintain minimum $100'
savings.withdraw(200);  // 'Withdrew $200'

Console Output

Click "Run Code" to see output here...

Real-World: User Hierarchy

Complete inheritance example

User Types

class User {
  constructor(username, email) {
    this.username = username;
    this.email = email;
  }
  
  login() {
    console.log(`${this.username} logged in`);
  }
}

class AdminUser extends User {
  constructor(username, email) {
    super(username, email);
    this.isAdmin = true;
  }
  
  deleteUser(user) {
    console.log(`Admin deleted ${user}`);
  }
}

class GuestUser extends User {
  login() {
    console.log('Guest has limited access');
  }
}

const admin = new AdminUser('admin', 'admin@site.com');
admin.login();  // 'admin logged in'
admin.deleteUser('baduser');  // 'Admin deleted baduser'

const guest = new GuestUser('guest', 'guest@site.com');
guest.login();  // 'Guest has limited access'

Complete Real-World Example

E-commerce product hierarchy

javascript

code

DarkEditable

// Base Product class
class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
  
  getInfo() {
    return `${this.name} - $${this.price}`;
  }
  
  calculatePrice(quantity) {
    return this.price * quantity;
  }
}

// Digital Product (can be downloaded)
class DigitalProduct extends Product {
  constructor(name, price, fileSize) {
    super(name, price);
    this.fileSize = fileSize;
  }
  
  getInfo() {
    return `${super.getInfo()} (File: ${this.fileSize}MB)`;
  }
  
  download() {
    console.log(`Downloading ${this.name}...`);
  }
}

// Physical Product (needs shipping)
class PhysicalProduct extends Product {
  constructor(name, price, weight) {
    super(name, price);
    this.weight = weight;
  }
  
  getInfo() {
    return `${super.getInfo()} (Weight: ${this.weight}kg)`;
  }
  
  calculatePrice(quantity) {
    const basePrice = super.calculatePrice(quantity);
    const shipping = this.weight * 5;  // $5 per kg
    return basePrice + shipping;
  }
}

// Usage
const ebook = new DigitalProduct('JavaScript Guide', 29.99, 5);
const laptop = new PhysicalProduct('Laptop', 999, 2);

console.log(ebook.getInfo());
// 'JavaScript Guide - $29.99 (File: 5MB)'

console.log(laptop.getInfo());
// 'Laptop - $999 (Weight: 2kg)'

console.log(ebook.calculatePrice(2));    // 59.98
console.log(laptop.calculatePrice(1));   // 1009 (999 + 10 shipping)

ebook.download();  // 'Downloading JavaScript Guide...'

Console Output

Click "Run Code" to see output here...

Key Takeaways

Do This ✅

• Use extends to inherit from parent
• Call super() in child constructor
• Use super.method() to extend parent methods
• Override methods when child needs different behavior
• Check types with instanceof

Avoid This ❌

• Don't forget super() in constructor
• Don't use this before super()
• Don't create deep inheritance chains (3+ levels)
• Don't inherit just to reuse code (use composition)
• Don't override without good reason

Inheritance Pattern

class Parent {
  constructor(param1) {
    this.property1 = param1;
  }
  
  method1() {
    // parent implementation
  }
}

class Child extends Parent {
  constructor(param1, param2) {
    super(param1);  // Call parent constructor
    this.property2 = param2;
  }
  
  method1() {
    super.method1();  // Call parent method (optional)
    // child implementation
  }
  
  method2() {
    // child-only method
  }
}

Design Tip

Prefer composition over inheritance when possible. Only inherit when there's a true "is-a" relationship (Dog IS-A Animal). For "has-a" relationships, use composition!

Previous Topic

ES6 Classes

Modern class syntax for object-oriented programming in JavaScript.

Next Topic

Getters & Setters

Accessor properties for controlled property access in objects and classes.

Ask a Question

Have a question about Class Inheritance? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Fundamentals

Class Inheritance

Create specialized classes that inherit from parent classes

Find videos you like?

Save to resource drawer for future reference!

What is Class Inheritance?

Inheritance lets you create a specialized class based on an existing one. The new class gets all properties and methods from the parent, plus its own unique features!

Parent-Child Analogy

Like a child inheriting traits from parents! A "Dog" class can inherit from "Animal" - it gets all Animal features, plus Dog-specific behaviors like barking.

Basic Inheritance with extends

Use extends keyword to inherit from parent class

Parent → Child

// Parent class
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

// Child class inherits from Animal
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Buddy');
dog.speak();  // 'Buddy makes a sound' (inherited)
dog.bark();   // 'Buddy barks!' (own method)

Basic Inheritance Example

Child class inherits from parent

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

super() - Call Parent Constructor

Initialize parent class properties

Calling Parent Constructor

Use super() to call the parent's constructor

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

class Dog extends Animal {
  constructor(name, age, breed) {
    super(name, age);  // Call parent constructor
    this.breed = breed;  // Add child property
  }
}

const dog = new Dog('Buddy', 3, 'Golden Retriever');
console.log(dog.name);   // 'Buddy' (from parent)
console.log(dog.age);    // 3 (from parent)
console.log(dog.breed);  // 'Golden Retriever' (own)

Important: If child has constructor, you must call super() before using this!

super() Examples

Initializing parent and child properties

javascript

code

DarkEditable

const car = new Car('Toyota', 'Camry', 2020, 4);
console.log(car.getDetails());
// '2020 Toyota Camry (4 doors)'

Console Output

Click "Run Code" to see output here...

Method Overriding

Replace parent method with child's version

Override Parent Methods

Child class can define its own version of a parent method

class Animal {
  speak() {
    console.log('Animal makes a sound');
  }
}

class Dog extends Animal {
  speak() {
    console.log('Dog barks!');  // Override parent method
  }
}

class Cat extends Animal {
  speak() {
    console.log('Cat meows!');  // Override parent method
  }
}

const animal = new Animal();
const dog = new Dog();
const cat = new Cat();

animal.speak();  // 'Animal makes a sound'
dog.speak();     // 'Dog barks!' (overridden)
cat.speak();     // 'Cat meows!' (overridden)

Method Overriding Examples

Customizing parent methods

javascript

code

DarkEditable

class Shape {
  constructor(name) {
    this.name = name;
  }
  
  getArea() {
    return 0;  // Default implementation
  }
  
  getInfo() {
    return `${this.name}: Area = ${this.getArea()}`;
  }
}

class Circle extends Shape {
  constructor(radius) {
    super('Circle');
    this.radius = radius;
  }
  
  // Override getArea()
  getArea() {
    return Math.PI * this.radius ** 2;
  }
}

const rect = new Rectangle(5, 10);
const circle = new Circle(7);

console.log(rect.getInfo());
// 'Rectangle: Area = 50'

console.log(circle.getInfo());
// 'Circle: Area = 153.93...'

// Real-world: Employee types
class Employee {
  constructor(name, baseSalary) {
    this.name = name;
    this.baseSalary = baseSalary;
  }
  
  getSalary() {
    return this.baseSalary;
  }
}

const emp = new Employee('John', 50000);
const mgr = new Manager('Jane', 60000, 10000);

console.log(emp.getSalary());  // 50000
console.log(mgr.getSalary());  // 70000 (overridden)

Console Output

Click "Run Code" to see output here...

super.method() - Call Parent Method

Extend parent method instead of replacing

Extend Parent Behavior

Call parent method and add child behavior

class Animal {
  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  speak() {
    super.speak();  // Call parent method first
    console.log('Woof woof!');  // Then add child behavior
  }
}

const dog = new Dog();
dog.name = 'Buddy';
dog.speak();
// 'Buddy makes a sound' (parent)
// 'Woof woof!' (child)