"Enhance" existing JS class in ECMAScript 2017 (Firefox v55)?

Question

Basically I'm wondering whether it is possible to redefine a method at class level, not instance level, as sought here.

Just to make clear, also, I want to be able to call the original method (on this) from within the enhanced/replacement method.

I tried implementing the chosen answer, "decorating the constructor", but it doesn't appear to work in FF55's "SpiderMonkey" version of ES2017: I get a message saying the class "requires new".

Doing a bit of googling I found this article. This man talks about a whole bunch of concepts which I wasn't even aware existed in Javascript! My knowledge of JS hasn't gone much beyond the Javascript Definitive Guide 6th Edition, although I do use Promises and async/await a lot (I'm hoping a new edition of the JS Def Guide will come out one day...).

So are there any experts out there who know of a way to, essentially, "enhance" (i.e. re-engineer, not extend) existing JS classes in ES2017?

mokahaiku · Answer 1 · 2017-09-02T08:47:08.187

0

Let say you have a class named Original, which has a render method, which you want to update.

class Original {
  render() {
    return 'Original';
  }
}

You can update it by changing the render method of the prototype of the Original function like so:

Original.prototype.render = function() {
  return 'Changed';
}

If you want to add a new method to your class this is how you do it:

Original.prototype.print = function() {
  return 'Printing...';
}

Then you can use these methods as usual.

const changed = new Original().render();
const printed = new Original().print();

edited Sep 02 '17 at 08:47

answered Sep 02 '17 at 08:16

mokahaiku

251
3
10

Thanks... but no, that's not what I'm looking for. I want to replace a class method with an enhanced version of that method and/or add new methods ... to an existing class, so that all new instances will then implement that altered functionality. My question makes this fairly clear. – mike rodent Sep 02 '17 at 08:19
My bad, I didn't understood your problem at first. Updated my answer. – mokahaiku Sep 02 '17 at 08:48
Thanks for the update... I also have not made something clear - the fly in the ointment if you will ;-) - I want to be able to call the original method from inside the enhanced method. I always run into infinite recursion... whereas when overriding on a per-instance basis this is easy to avoid. Updating the question now... – mike rodent Sep 02 '17 at 09:32

score 0 · Accepted Answer · answered Sep 02 '17 at 09:41

0

Whoops... thanks to Dovydas for this. I was obviously having a mental block!

const superObserve = MutationObserver.prototype.observe;
MutationObserver.prototype.observe = function( target, config ){
    console.log( 'blip');
    superObserve.call( this, target, config );
}

answered Sep 02 '17 at 09:41

mike rodent

14,126
11
103
157

Or of you don't need actual parameters: `MutationObserver.prototype.observe = function( ...args ){ console.log( 'blip'); superObserve.call( this, ...args ); }` – zerkms Sep 02 '17 at 09:43

"Enhance" existing JS class in ECMAScript 2017 (Firefox v55)?

2 Answers2