Javascript 将所有jQuery函数包装到一个类中

我想为一个js类包装所有

jQuery的
DOM函数，但让这些函数只处理该类的一个属性

class Foo {
  constructor() {
    this.$wrapper = $('<div>wrapper</div>')
  }
}

var f = new Foo();

// have to call this
f.$wrapper.appendTo($('body'));
// want to call this
f.appendTo($('body'));

class-Foo{
构造函数（）{
此.$wrapper=$（'wrapper'））
}
}
var f=新的Foo（）；
//我不得不称之为
f、 $wrapper.appendTo（$（'body'））；
//你想叫这个吗
f、 附于（$（‘正文’）；

通过为每个jQuery方法创建一个相同的命名方法，并始终将其应用于
this.$wrapper
，我可以手动完成这项工作，这需要花费很多时间。但我想知道是否有更简单的方法来做到这一点

一个选项是使用ES2015代理，即
代理
构造函数

class Foo {
  constructor() {
    this.$wrapper = $('<div>wrapper</div>');
    return new Proxy(this, {
        get: function(target, prop, receiver) {
         if ( target.hasOwnProperty(prop) ) {
           return target[prop];
         }
         return function() {
           let ret = target.$wrapper[prop](...arguments);
           if ( ret !== target.$wrapper ) return ret;
           return receiver;
         }
      }
    });
  }
}

var f = new Foo();
var a = f.appendTo($('body')).text('changed').prop('tagName');

class-Foo{
构造函数（）{
这个.$wrapper=$（'wrapper'）；
返回新代理（此{
获取：功能（目标、道具、接收器）{
if（target.hasOwnProperty（prop））{
返回目标[道具]；
}
返回函数（）{
让ret=target.$wrapper[prop]（…参数）；
如果（ret！==target.$wrapper）返回ret；
返回接收器；
}
}
});
}
}
var f=新的Foo（）；
var a=f.appendTo（$（'body'））.text（'changed'）.prop（'tagName'）；

但由于以下几个原因，不建议使用：

浏览器支持
代理速度很慢
jQuery有getter和setter，创建一个代理处理程序比处理所有jQuery和类方法要复杂得多
是的，只需扩展
jQuery.fn.init
并使用
super
调用：


类Foo扩展jQuery.fn.init{
构造函数（）{
超级（“包装器”）；
}
}
Foo.prototype.constructor=jQuery；
新的Foo（）.appendTo（'body'）
这是客户端脚本吗？如果是这样的话，
class
在一些主要的浏览器上就不受支持了，因为它来自ECMAScript 6。这样的分类违背了您所做的全部要点？如果您仍然想直接调用
f.appendTo
，只需执行
var f=$（…）
并删除该类，因为您必须将
f
设置为等于返回的包装jQuery元素。请阅读一些OOJS示例（面向对象javascript）@4卡斯特我用巴贝尔来传输。@adeneo也许这只是一个愚蠢的想法。代理很难理解。它本质上是克隆一个对象并覆盖它的一个属性吗？@tester23223不，它不克隆对象，它包装对象并控制它的行为。就像PHP的神奇方法一样。看见