extend non ES6 object

Question

Working to understand the new ES6 syntax. If I have a class like the Outlayer library that is not written in ES6 but want to extend it with an ES6 class how would that look? The key extension point is _getItemLayoutPosition

I tried something like this.

export let MyGrid = Outlayer.create('AnyGrid', {});

MyGrid._getItemLayoutPosition = function() {
   // this does not get called
}

If I do new MyGrid(element)

My extended _getItemLayoutPosition never gets called.

So then I thought maybe I need to extend the class

export class AnyGrid extends Outlayer {
  _getItemLayoutPosition(item) {
    return {
      x: 0,
      y: 0
    }
  }
}

This gives an error Type 'typeof 'Outlayer'' is not a constructor function type.

What is the proper way to extend this class so that I can override the _getItemLayoutPosition method?

Answer 1

Please try the following:

// AnyGrid- subclass
function AnyGrid() { 
    Outlayer.apply(this, arguments); // call super constructor.
}

// subclass extends superclass
AnyGrid.prototype = Object.create(Outlayer.prototype);
AnyGrid.prototype.constructor = AnyGrid;

//Add/Override the method
AnyGrid.prototype._getItemLayoutPosition = function() {
   // this does not get called
}

Don't forget to export AnyGrid .

Answer 2

Since Outlayer.create actually creates a function that inherits from Outlayer you have to add the method on the prototype instead of the function itself

export let MyGrid = Outlayer.create('AnyGrid', {});

MyGrid.prototype._getItemLayoutPosition = function() {
   // this does not get called
}

Note that the function returned when you call Outlayer.create has additional properties ie is not the same as creating a class that inherits from Outlayer