DEV Community

loading...
Cover image for JS interview in 2 minutes / Inheritance in OOP

JS interview in 2 minutes / Inheritance in OOP

Nikita Kozlov
Make things happen ✨ Webdev / websec / management / drawing
・3 min read

// It may be worth to read previous part first
// JS interview in 2 minutes / Object-Oriented Programming (OOP)

Question:
What is Inheritance in OOP?

Quick answer:
Inheritance is a way to modify or extend parent class in child class.

Longer answer:
Let's see what we've got in the previous post and try to extend it.

class DogProfile {
  constructor(name, age) {
    this.name = name
    this.age = age
    this.isGood = true
  }

  bark() {
    alert('Bark!')
  }

  barkInEnglish() {
    alert(`Hello my friend! My name is ${this.name}.`)
  }

  // ...
}
Enter fullscreen mode Exit fullscreen mode

Now we have a working dog's profile, but what if we need to add a cat's profile? It would be a bit different because good or bad terminology is not applicable to cats, they are above these measurements.

{
  name: 'Fluffer',
  age: 2,
  isFluffer: true,
}
Enter fullscreen mode Exit fullscreen mode

Copying and modifying the DogProfile class would be weird since we will need to maintain two almost exact copies.

Inheritance to the rescue! We can move shared functionality to some standalone class and just inherit DogProfile and CatProfile from the new BaseProfile class.

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

  setName(name) {
    this.name = name
  }

  setAge(age) {
    this.age = age
  }
}

class DogProfile extends BaseProfile {
  constructor(name, age) {
    super(name, age)
    this.isGood = true
  }

  bark() {
    alert('Bark!')
  }

  barkInEnglish() {
    alert(`Hello my friend! My name is ${this.name}.`)
  }
}

class CatProfile extends BaseProfile {
  constructor(name, age, isFluffer) {
    super(name, age)
    this.isFluffer = isFluffer
  }

  meow() {
    alert('Meow!')
  }
}

const doggert = new DogProfile('Doggert', 2)
doggert.barkInEnglish()

const fluffert = new CatProfile('Fluffert', 2, true)
fluffert.meow()
Enter fullscreen mode Exit fullscreen mode

Awesome, like this, we can create any new profile type without much effort and every new class will only have new fields and methods which are needed.

Real-life applications:

An issue with Inheritance is that if you don't plan few steps ahead, you may end up in mess.

One possible type of issue is when inheritance doesn't actually describe data relations.

class Duck {
  quack() {}
  fly() {}
}

class Plane extends Duck {
  // Forbidding quacking...
  quack() { throw new Error('DO I LOOK LIKE A DUCK TO YOU?') }
}
Enter fullscreen mode Exit fullscreen mode

This won't be a very reliable Plane to fly on. Imagine someone will update Duck fly methods with a time limit after it gets tired. The plane will get tired and return to the nest as well.

Untitled_Artwork

Another possible issue is when you have complex data and there are more than 9000 levels of classes nesting.

// I saw this once, it was terrible 😱

class Base {
  constructor(id) { this.id = id }
}

class NamedProfile extends Base { /* ... */ }
class ProfileWithRoles extends NamedProfile { /* ... */ }
class AdminProfile extends ProfileWithRoles { /* ... */ }
// ...
// Things can get much worse if you end up using multiple inheritances without any control
// https://stackoverflow.com/questions/29879267/es6-class-multiple-inheritance/45332959

Enter fullscreen mode Exit fullscreen mode

There is a way to play around with this issue using composition over inheritance or using design patterns. I will try to cover them in the following posts.

Resources:
wiki/OOP
wiki/Inheritance

Other posts:


Btw, I will post more fun stuff here and on Twitter. Let's be friends 👋

Discussion (4)

Collapse
agatamaria profile image
Agata Maria

"Now we have a working dog's profile, but what if we need to add a cat's profile? It would be a bit different because good or bad terminology is not applicable to cats, they are above these measurements."

😂

Thanks, great article!

Collapse
kozlovzxc profile image
Nikita Kozlov Author

Haha, glad you like the joke 🐱

Collapse
rfso profile image
Rafael S. • Edited

All these articles are pretty good, thanks @kozlovzxc ...keep it up!!

Collapse
kozlovzxc profile image
Nikita Kozlov Author

Thanks 💪 I will do my best!