Javascript inheritance with super() call

Question

I had some pseudoclasses that shared a large part of their initialization. I decided to take this initialization out and create a base class, from which they'll inherit.

function BaseClass(param1, param2) {
    ...
}

function SubClassA(param1) {
    ...
}

function SubClassB(param1) {
    ...
}

I want SubClass1 and SubClass2 to inherit from BaseClass in the following manner:

SubClassA(param1) constructor calls BaseClass(param1, "I am A.")

SubClassB(param1) constructor calls BaseClass(param1, "I am B.")

so BaseClass adds some properties to them. Then both subclasses do some initialization of their own.

Now I can't just do SubClassA.prototype = new BaseClass() , because I want the super constructor to take parameters. How to do this elegantly?

Answer 1

function SubClassA(param1) {
    BaseClass.call(this, param1, "I Am A.");
}

function SubClassB(param1) {
    BaseClass.call(this, param1, "I Am B.");
}

When you do a new SubClassA(param1) or new SubClassB(param1) base constructor will be called with appropriate parameters.

Also, there are other ways than SubClassA.prototype = new BaseClass() to define base class. You can check this question for some details. (Disclaimer: The question was asked by me.)

Answer 2

I made an Objective-JavaScript helper called Class.js - https://github.com/eppz/eppz-js - soley for this reason (without any additional boilerplate code to apply, also cut down prototype hassle).

Using it you can easily make this setup as:

var BaseClass = Class.extend
({
    param1: null,
    param2: null,

    construct: function(param1, param2)
    {
        this.param1 = param1;
        this.param2 = param2;
    },
});

var SubClassA = BaseClass.extend
({
    construct: function(param1)
    {
        this.super.construct(param1, 'This is A.');
    },
});

var SubClassB = BaseClass.extend
({
    construct: function(param1)
    {
        this.super.construct(param1, 'This is B.');
    },
});

var a = new SubClassA('A stuff.');
var b = new SubClassB('B stuff.');

console.log(a.param1); // A stuff.
console.log(b.param1); // B stuff.

console.log(a.param2); // This is A.
console.log(b.param2); // This is B.

Answer 3

I have something similar and I do this:

function SubClass (param1) {
    BaseClass.call(this, param1, "I am A.");
}

This gives me all the properties of BaseClass on the instance object of SubClass .

EDIT: Here is some information on the call function . It's useful because you can specify what this is during the call and provide an argument list.

Answer 4

Add an area method to Rectangle's prototype.Create a Square class that satisfies the following:

1. It is a subclass of Rectangle.
2. It contains a constructor and no other methods.

3. It can use the Rectangle class' area method to print the area of a Square

   class Rectangle { constructor(w, h) { this.w = w; this.h = h; } } Rectangle.prototype.area = function() { var a = this.w * this.h; return a; } class Square extends Rectangle{ constructor(r) { super(r, r) } } const rec = new Rectangle(3, 4); const sqr = new Square(3); console.log(rec.area()); console.log(sqr.area());

Answer 5

Here is an example of inheritance with super keyword

    class Animal {
  constructor(animalName, country) {
    this.animalName = animalName;
    this.country = country;
  }

  update(animalName=null, country=null) {
    if (animalName) {
      this.animalName = animalName;
    }
    if (country) {
      this.country = country;
    }
  }

  show() {
    console.log("A");
    console.log("Animal Name: ", this.animalName);
    console.log("Animal Country: ", this.country);
  }
}

animal = new Animal("Elephant", "India");
animal.show();
animal.update();
animal.show();
animal.update("Dog");
animal.show();
animal.update(null, "Africa");
animal.show();
animal.update("Whale", "Antartica");
animal.show();

class Whale extends Animal {
  constructor(name, animalName, country) {
    super(animalName, country);
    this.name = name;
  }

  updateName(name=null) {
    if (name) {
      this.name = name;
    }
  }

  show() {
    console.log("W");
    super.show();
    console.log("Penguin Name: ", this.name);
  }
}

whale = new Whale("Ele", "Whale", "Goa");
whale.show();
whale.updateName();
whale.show();
whale.updateName("Molly");
whale.show();
whale.updateName(null);
whale.show();
animal.update("Ants");
whale.show();
animal.update(null, "Australia");
whale.show();
animal.update("Mites", "New Zealand");
whale.show();

class Penguin extends Animal {
  constructor(name, animalName, country) {
    super(animalName, country);
    this.name = name;
  }

  updateName(name=null) {
    if (name) {
      this.name = name;
    }
  }

  show() {
    console.log("P");
    super.show();
    console.log("Penguin Name: ", this.name);
  }
}

penguin = new Penguin("Molly", "Penguin", "Goa");
penguin.show();
penguin.updateName();
penguin.show();
penguin.updateName("Pikachu");
penguin.show();
penguin.updateName(null);
penguin.show();
animal.update("Cat");
penguin.show();
animal.update(null, "Russia");
penguin.show();
animal.update("Seal", "Artic");
penguin.show();

You can try this code here: https://repl.it/@VinitKhandelwal/inheritance-javascript