Object-Oriented JavaScript — Multiple Inheritance

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at multiple inheritance.

Multiple Inheritance

We can do multiple inheritance easily by merging properties from different properties into one object and then return the object.

For instance, we can write:

function multi(...args) {
  let obj = {};
  for (const arg of args) {
    obj = {
      ...obj,
      ...arg
    };
  }
  return obj;
}

Then we can use it by writing:

const obj = multi({
  foo: 1
}, {
  bar: 2
}, {
  baz: 3
});

obj is then:

{foo: 1, bar: 2, baz: 3}

We pass in multiple objects and then copied the properties with the spread operator.

Mixins

Mixins is an object that can be incorporated into another object.

When we create an object, we can choose which mixin to incorporate into the final object.

Parasitic Inheritance

Parasitic inheritance is where we take all the functionality from another object into a new one.

This pattern is created by Douglas Crockford.

For instance, we can write:

function object(proto) {
  function F() {}
  F.prototype = proto;
  return new F();
}

const baseObj = {
  name: '2D shape',
  dimensions: 2
};

function rectangle(baseObj, width, height) {
  const obj = object(baseObj);
  obj.name = 'rectangle';
  obj.getArea = function() {
    return this.width * this.height;
  };
  obj.width = width;
  obj.height = height;
  return obj;
}

const rect = rectangle(baseObj, 2, 3);
console.log(rect);
console.log(rect.getArea());

We have the object function which returns an instance of F .

Then we created the rectangle function that incorporates the baseOf , width and height and incorporate that into the object returned by object .

object takes the baseObj into the prototype of F .

And we add own properties to obj , which we return to add more properties.

This way if we log the value of rect , we get:

{name: "rectangle", width: 2, height: 3, getArea: ƒ

And __proto__ for rect has:

dimensions: 2
name: "2D shape"

We can also call the getArea as we did in the last console log, and we get 6.

So we know this is referring to the returned object.

Borrow a Constructor

We can call a parent constructor from a child constructor.

For instance, we can write:

function Shape(id) {
  this.id = id;
}

Shape.prototype.name = 'Shape';
Shape.prototype.toString = function() {
  return this.name;
};

function Square(id, name, length) {
  Shape.apply(this, [id]);
  this.name = name;
  this.length = length;
}

Square.prototype = new Shape();
Square.prototype.name = 'Square';

We have the Shape constructor, which takes the id parameter.

We call the Shape constructor with apply so that we this is set to the Shape constructor.

This will set this.id from Square .

Then we can populate our own properties.

And then we create Square ‘s prototype with the Shape instance.

Then we set the name to 'Square' since this is shared because of all the Square instances.

The way, we copy the properties from Shape to Square by setting Square’s prototype property.

Conclusion

We can create objects with various ways of inheritance.

We can call the parent’s constructor and incorporate various properties from various objects.