各メソッド呼び出しでjQueryがコンストラクタを呼び出す

Question

jqueryをES6クラスに拡張しようとしています。継承されたjQuery関数を呼び出すたびにすべてが実際に動作しますが、jQueryは毎回コンストラクタを呼び出すようです。これはこのフィドルで明らかです。またtriggerは4回呼ばれるようです。

（transpiledコード） https://jsfiddle.net/w3bbzgrn/1/

これはあなたが現在のコールスタックをダンプするvar stack = new Error().stackを使用して、コンストラクタが二回呼び出される理由を見ることができ、ソースコード

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

です。更新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 

だから、それは二回が、2つの異なる状況で呼ばれています：

1. 初めて、それが原因var f = new Foo(t);
2. で呼ばれています2回目は、f.appendTo('body')を使用しています。要素を追加する前に要素のコピーを作成しようとしているようです。

おそらく"jquery append creates duplicates"のようなグーグルで試してみてください。