0

I hacked away at this way to extend jQuery as an ES6 class. It seems to accomplish everything, but I am concerned about speed, so I also ran a test. It can create 1000 new instances of itself in under 0.5 seconds. This is to be used at MOST for generating table rows that are objects (for complex, updating tables that do not empty themselves). I am wondering if there is a better way to inherit the jquery prototypes than this this.__proto__ = $.extend(true, this.__proto__, this.__proto__.__proto__)

class Popup extends jQuery.fn.init {
  constructor() {
    super('<div>test</div>');
    this.$wrapper = null;

    this.__proto__ = $.extend(true, this.__proto__, this.__proto__.__proto__)
    return this;
  }

  test() {
    console.log('hi')
  }
}

https://jsfiddle.net/ctyzaphw/3/

Tester232323
  • 301
  • 1
  • 11
  • 1
    1000 instances take 500ms? That's horribly slow. – Bergi Jul 06 '16 at 05:02
  • 1
    Why exactly do you think is `extends $.fn.init` not enough to inherit the jQuery methods? Btw, jQuery only has one prototype, I'm not sure why you are using plural here. – Bergi Jul 06 '16 at 05:02
  • `$.extend(true, this.__proto__, this.__proto__.__proto__)`, creating a deep copy which itself is a relatively slow process but just out of curiosity I wonder what benefit you get out of this? – Rohit416 Jul 06 '16 at 05:07
  • @Bergi I cannot just extend `fn.init` I would need to set `Popup.constructor = jQuery` which I didn't want – Tester232323 Jul 06 '16 at 05:23
  • @Tester232323: Why do you think you'd need to set `Popup.constructor` (which is `Function`) to `jQuery`? [Last time I looked](http://stackoverflow.com/a/19759103/1048572) inheriting from jQuery was rather simple, you just have to care that `fn.init` doesn't have the same interface as `$`. – Bergi Jul 06 '16 at 05:28
  • @Bergi because https://jsfiddle.net/raqaa5La/ results in `Uncaught TypeError: Class constructor Foo cannot be invoked without 'new'` – Tester232323 Jul 06 '16 at 05:36
  • Although it seems to all work if it is transpiled into es5.1 – Tester232323 Jul 06 '16 at 05:53

1 Answers1

0

Thats an interesting experiment. But you might want to look into Object.assign from es15. Full description is available here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Works by taking a target and a source Object.assign(target, source)

Oz Lodriguez
  • 965
  • 5
  • 16