Расширение конструктора вызовов jQuery при каждом вызове метода

Question

Я мучительно пытаюсь расширить jquery в класс ES6, а затем перевести с помощью Babel. Все работает фактически, за исключением того, что каждый раз, когда я вызываю унаследованную функцию jQuery, jQuery, кажется, каждый раз вызывает конструктор. Это очевидно в этой скрипке. Также trigger, кажется, называется 4 раза.

(transpiled код) https://jsfiddle.net/w3bbzgrn/1/

Это исходный код

class Popup extends jQuery.fn.init { 
    constructor(t) { 
    super(t); 
    this.init(t); 
    return this; 
    } 

    test(){ 
     this.trigger('test', 55) 
     return this 
    } 
} 

class Foo extends Popup{ 
    constructor(t){ 
    super(t) 
    console.log("I get called") 
     return this 

    } 
} 

var t = $('<div>hi</div>') 
var f = new Foo(t); 
f.on('test', function(e,args){ 
    console.log(args) 
}) 
f.appendTo('body').test().slideUp() 

Answer 1

Вы можете использовать var stack = new Error().stack сбросить текущий стек вызовов и понять, почему конструктор вызывается дважды. Смотрите обновленный JSFiddle: https://jsfiddle.net/w3bbzgrn/3/

Это выводит на консоль:

PRINTING CALL STACK 
Error 
    at new Foo (VM149:90) 
    at window.onload (VM149:102) 
I get called 
PRINTING CALL STACK 
Error 
    at new Foo (https://fiddle.jshell.net/_display/:90:15) 
    at Foo.pushStack (https://code.jquery.com/jquery-3.0.0.js:141:32) 
    at Foo.jQuery.fn.(anonymous function) [as appendTo] (https://code.jquery.com/jquery-3.0.0.js:5920:15) 
    at window.onload (https://fiddle.jshell.net/_display/:106:3) 
I get called 
55 

Итак, это называется дважды, но в двух различных ситуациях:

1. в первый раз, это называется из-за var f = new Foo(t);
2. Второй раз при использовании f.appendTo('body'). Похоже, он пытается создать копию элемента перед его добавлением.

Возможно, попробуйте googling что-то вроде "jquery append creates duplicates".