Javascript class that extends from Array and another class

Question

How can I make or simulate a javascript class that extends another class and Array. I have another class Serializable that it also needs to extend to have a serialize and deserialize function.

class ArrayLikeClass extends Serializable({"_title": "raw"}){
  constructor(title){
    this._title = title;
  }
  /* Serializable adds these:
  serialize(){...serializes the class}
  static deserialize(){...deserializes the class}
  // I don't want to add these in manually */
}

Using this I have a class that is serializable. How can I make this have the methods serialize and deserialize from Serializable but also extend Array

I would use mixins as suggested in the possible duplicate, however how can I use mixins to have a static function deserialize

Serializable should be an interface, not a base class. In JavaScript "interfaces" are implemented through a common practice called "mixins", which should be a good google search term to use in finding a solution. — Patrick Roberts
– Patrick Roberts, Commented Apr 30, 2018 at 18:46
@PatrickRoberts How can I use mixins to make a static method — pfg
– pfg, Commented Apr 30, 2018 at 18:48
Possible duplicate of Multiple inheritance/prototypes in JavaScript — Patrick Roberts
– Patrick Roberts, Commented Apr 30, 2018 at 18:48
@pfg export default Serializable({_title:"raw"}, class extends Array { … }). — Bergi
– Bergi, Commented Apr 30, 2018 at 18:50
@pfg class ArrayLikeClass extends Array { ... } and ArrayLikeClass.deserialize = Serializable({_title: "raw"}).deserialize or something like that. — Patrick Roberts
– Patrick Roberts, Commented Apr 30, 2018 at 18:50

Jared Smith · Accepted Answer · 2018-04-30 18:50:22Z

2

In JavaScript, classes are expressions. You can take advantage of this:

function addSerialize(superclass) {
  return class Serialize extends superclass {
    // serialize class goes here
  }
}

class MyArray extends addSerialize(Array) {
  // MyArray stuff goes here
}

AFAIK, Justin Fagani at Google came up with this approach. He also wrote a little helper library to assist with implementing it.

answered Apr 30, 2018 at 18:50

Jared Smith

22.3k5 gold badges50 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

pfg Over a year ago

Is there a way to not provide a superclass using a method like this? I assume extending undefined would throw an error. Edit: going to default superclass to an empty class, this should work

Patrick Roberts Over a year ago

I like how this mixin approach mimics multiple inheritance by inserting an extra prototype in between with the interface implementation. +1

Jared Smith Over a year ago

@pfg of course, just pass it an empty class: const Serialize = addSerialize(class {});. Again, classes in ES 6 JavaScript are first-class: you can assign them to vars, pass them as parameters, return them from functions, etc.

Patrick Roberts Over a year ago

@pfg the core issue you're experiencing is that multiple inheritance is not supported in JavaScript, since inheritance is prototype-based. This is honestly a very elegant way of working around that issue, and while there are other approaches, this seems like the most DRY way you're going to get for what you're trying to do.

Patrick Roberts Over a year ago

The only downside of this is that you'll need more code, specifically implementing Symbol.hasInstance in order to support a semantic instanceof operator that pretends there's multiple inheritance going on.

|

Patrick Roberts · Accepted Answer · 2018-04-30 20:54:12Z

2

If you want to support instanceof operator, here's an extension to Jared's approach that allows this by ~~defining Symbol.hasInstance~~ memoizing Serializable():

function serialize () {
  // implementation
}

function deserialize (string) {
  // implementation
}

// optional memoization
const Bases = new WeakMap()

// use Object instead of anonymous class {} so that default can be memoized
function Serializable (Base = Object) {
  // optional memoization
  if (Bases.has(Base)) {
    return Bases.get(Base)
  }

  class Serialize extends Base {
    static deserialize () {}
    serialize () {}
  }

  Serialize.deserialize = deserialize
  Serialize.prototype.serialize = serialize

  // optional memoization
  Bases.set(Base, Serialize)

  return Serialize
}

// usage
class ArrayLike extends Serializable(Array) { }

let arrayLike = new ArrayLike()
console.log(arrayLike instanceof Array) // true
console.log(arrayLike instanceof Serializable(Array)) // true

edited Apr 30, 2018 at 20:54

answered Apr 30, 2018 at 19:58

Patrick Roberts

52.4k10 gold badges120 silver badges166 bronze badges

1 Comment

Jared Smith Over a year ago

Nice. Love the use of Object as the default.

Collectives™ on Stack Overflow

Javascript class that extends from Array and another class

2 Answers 2

12 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related