Code Monkey home page Code Monkey logo

phase-1-class-extension-and-inheritance's Introduction

Class Extensions and Inheritance

Learning Goals

  • Use the extends keyword

Introduction

In JavaScript, as in other Object Oriented languages, we've learned that we can create classes and build methods that can perform actions on instance data, or specific to the class. What if you have classes that exhibit many of the same behaviors, such as Cat, Dog, and Bird, which all have a method for speak?

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

  speak() {
    return `${this.name} says woof!`
  }
}

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

  speak() {
    return `${this.name} says meow!`
  }
}

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

  speak() {
      return `${this.name} says squawk!`
    }
  }

In this code snippet, Dog, Cat, and Bird all accept name and have a method called speak(), thus repeating code. In JavaScript, we can create "child" object classes that inherit methods and properties from their "parent" classes, allowing us to reuse some class methods while building in additional functionality.

In this lesson, we'll discuss 1 way of extending functionality to other classes.

Use the extends Keyword

To get started with inheriting class functionality, we utilize the extends keyword. extends is used in class declarations to create a class which is a child of another class.

class Pet {
  constructor(name, sound) {
    this.name = name;
    this.sound = sound;
  }

  speak() {
    return `${this.name} says ${this.sound}!`
  }
}

class Dog extends Pet {
  // inherits constructor from Pet
}

class Cat extends Pet {
  // inherits constructor from Pet
}

class Bird extends Pet  {
  // inherits constructor from Pet
  fly() {
    return `${this.name} flies away!`
  }
}

let dog = new Dog("Shadow", "woof");
let cat = new Cat("Missy", "meow");
let bird = new Bird("Tiki", "squawk");

dog.speak(); // Shadow says woof!
cat.speak(); // Missy says meow!
bird.speak(); // Tiki says squawk!
bird.fly(); // Tiki flies away!

In addition to inheriting the functionality of the Pet class, each "child" class extending the functionality of the parent. For example, Bird has an additional method called fly that is unique to it, and not present on Pet. Bird can still call speak().

Conclusion

In this lesson, we learned about more functionality in JavaScript that allows us to leverage Object Orientation concepts: class extensions and inheritance. With extends we can create new classes that are capable utilizing of all the same methods as its parent. Leveraging inheritance and extends is vital in Object Oriented programming. It keep code bases maintainable by sharing and reusing code in a beneficial manner.

Resources

phase-1-class-extension-and-inheritance's People

Contributors

drakeltheryuujin avatar lizbur10 avatar sgharms avatar jlboba avatar maxwellbenton avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.