Inheritance in JS


Inheritance allows us to pass prototype methods from one object constructor to another. This allows us to write less code since objects can inherit the methods of other objects.


Inheritance: Inherit the properties (Step 1)

Create a new object constructor called `Olympian`. Note: example uses code from a previous lesson. The final complete version is found below.

   
                     function Olympian(name,birthYear,gender,sport,numberOfOlympicGames,numberOfOlympicMedals){

                            // call the properties you want to inherit from the Person object constructor.
                            Person.call(this,name,birthYear,gender); 
                            // create the remaining properties for the `Olympian` function constructor 
                            this.sport = sport;
                            this.numberOfOlympicGames = numberOfOlympicGames;
                            this.numberOfOlympicMedals = numberOfOlympicMedals;
                            
                        }

                       


Inheritance: Inherit the protoypes (methods) (Step 2)

Set the Olympian prototypes to have access to the Person prototypes.

   
                     Olympian.prototype = Object.create(Person.prototype);
                       


Inheritance: Create a new instance (Step 3)

Create a new instance (of the object) using the Olympian function constructor.

   
                        const michaelPhelps = new Olympian('Michael Phelps',1985,'male','swimmer',5,28); 
                       


Inheritance: Create a new prototype (Step 4)

Create a new prototype function for the Olympian object constructor.

   
                     // We can create an `Olympian Greeting` that overwrites the Person Greeting.
                        Olympian.prototype.greeting = function(){
                            return `Hello my name is ${this.name} 
                                    and I'm a ${this.sport} 
                                    and have been to ${this.numberOfOlympicGames} Olympics!`;
                         } 

                    //Note: The old person greeting is still present for instances of Person. 
                       

The function greeting is a function for the Olympian object. This function is a special type of function. It is a function that is usually referred to as a method of the Olympian object.


Inheritance: Full Code Below

The following lines of code shows all the steps together

  

                     //Create Person Object Constructor 
                     function Person(name,birthYear,company,gender){
                        this.name = name;
                        this.birthYear = birthYear;
                        this.company = company;
                        this.gender = gender;
                    }

                    //Create Person greeting function for Person object constructor 
                    Person.prototype.greeting = function(){
                        return `Hello my name is ${this.name} and I am the CEO of ${this.company}!`;
                    }

                   //Create Person calculate age function for Person object constructor 
                    Person.prototype.calculateAge = function (){
                        const currentYear = (new Date()).getFullYear(); // get the current year
                        return currentYear - this.birthYear; // return the age.
                    }
                    
                   // Create new instance of Person `mark`.
                    const mark = new Person('Mark',1984,'facebook','male');

                  // Create Olympian Object Constructor using inheritance
                    function Olympian(name,birthYear,gender,sport,numberOfOlympicGames,numberOfOlympicMedals){
                        // call the properties you want to inherit from the Person object constructor.
                        Person.call(this,name,birthYear,gender); 

                        // create the remaining properties for the `Olympian` function constructor 
                        this.sport = sport;
                        this.numberOfOlympicGames = numberOfOlympicGames;
                        this.numberOfOlympicMedals = numberOfOlympicMedals;
                        
                    }
                    // inherit the prototypes from Person.
                    Olympian.prototype = Object.create(Person.prototype);

                    // create instance of Olympian
                    const michaelPhelps = new Olympian('Michael Phelps',1985,'male','swimmer',5,28);

            
                    // We can create an `Olympian Greeting` function.
                    Olympian.prototype.greeting = function(){
                        return `Hello my name is ${this.name} 
                        and I'm a ${this.sport} 
                        and have been to ${this.numberOfOlympicGames} Olympics!`;
                    }

                    console.log(michaelPhelps.greeting());
                    console.log(mark.greeting()); // note greeting for Person is still present to those instances.
                       





Services
  • SEO
  • Online Advertising
  • Online Ordering For Restaurants
  • Data Analytics

  • External Resources 4 Developers
  • CSS Tricks
  • MDN

  • Dash-Intel.com is a Power BI and Tableau resource site around data visualizations and building business dashboards.

    Data Analytics consultants in Edmonton, Alberta specializing in Tableau and marketing analytics

    Copyright 2020 Dash-Intel.com Terms / All rights reserved.