Search code examples
javascriptprototypeprototypal-inheritance

Using call() method vs setting prototype property for inheritance


I'm a somewhat beginner, I used to know the very basics but stopped programming after that.

In JavaScript's Prototypal Inheritance, I've found/learned two ways of doing this.

Using the prototype property of a constructor:

function Mammal(name) {
    this.name = name,
    this.order = "Mammal",

    this.sayHi = function() {
        console.log("My name is " + this.name);
    }
}

function Cat(name) {
    this.name = name;
    this.family = "Felidae";
}

Cat.prototype = new Mammal();

let lion = new Cat("Lion");

Or by calling the Mammal.call(this, name) method.

What are the differences between the two results? Which one is to be preferred if they're different?


Solution

  • Usually, we use class keyword to define a class in many program languages. In Javascript you can define your classes using simple and clear syntax using class keyword.

    Either you can use the two ways you mentioned, you can use class keyword:

    class Mammal {
      constructor(name) {
        this.name = name;
        this.order = 'Mammal';
      }
    
      sayHi() {
        console.log('My name is ' + this.name);
      }
    }
    
    class Cat extends Mammal {
      constructor(props) {
        super(props);
        this.family = 'Felidae';
      }
    }
    
    let lion = new Cat('Lion');
    
    lion.sayHi();

    Read more about classes on MDN or W3S