Question

我需要从jQuery对象继承来创建带有附加函数的自己的对象。

我已尝试使用两个自定义对象并且它可以工作：

var MotherClass = function(name){
   this.name = name;
}

MotherClass.prototype.getName = function(){
   console.log(this.name);
};

var mother = new MotherClass("mam");
mother.getName(); //=> mam

var ChildClass = function(propName){
   MotherClass.call(this, propName);
}

ChildClass.prototype = Object.create(MotherClass.prototype);

ChildClass.prototype.getChildName = function(){
   console.log(this.name + " child");
};

var child = new ChildClass("child");
child.getName(); //=> child
child.getChildName(); //=> child child

子类正确调用了母类的构造函数。现在我想用jQuery做同样的情况。

但是使用jQuery，我不知道如何调用jQuery的构造函数......

var ValueCounter = function (selector) {
   $.call(this, selector);
}

ValueCounter.prototype = Object.create(jQuery.prototype);

ValueCounter.prototype.dataCounter = function(){
    console.log(this.data('counter')); 
    // => this is equals to [] and not my div; 
    //so the return is "undefined" and note the value of my data.
};

var toto = new ValueCounter("#toto");
toto.dataCounter();

编辑：

要求：

我会创建一个继承自jQuery的对象。
仅在此对象上添加功能和/或属性。
像jQuery对象一样使用我的对象（myObject.addClass（...））

我希望这些功能能够使用最简单的对象，而不是在属性内创建一个简单的对象＆＃34; $ element＆＃34;因为你一直在写：myObject。$ element.jQueryFunctions。太长了。

我只想写：

myObject.jQueryFunctions
myObject.personnelFunctions
myObject.personnelProperties

Answer 1

由于没有向ValueCounter添加其他属性，最简单的方法是将jQuery别名为ValueCounter，使用$.fn.extend将dataCounter设置为jQuery对象的方法。另请参阅Building staeful jQuery plugins

var ValueCounter = jQuery;
$.fn.extend({
  dataCounter: function() {
    console.log(this.data("counter"));
    return this
  }
});

var toto = new ValueCounter("body");
toto.dataCounter();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<body data-counter="0">

要求：



我会创建一个继承自jQuery的对象。



仅在此对象上添加功能和/或属性。



像jQuery对象一样使用我的对象（myObject.addClass（...））

尝试使用for循环将jQuery属性设置为object，将fn.init()别名设置为$ at object

var obj = Object.create({
  "abc": 123,
  "color":"olive",
  "def": function() {
    return this.abc
  },
  "el": "body",
  "method": function() {
    return this
  }
});

for (prop in window["jQuery"]) {
  // alias `$` to `fn.init` at `obj`
  if(prop === "fn") { obj["$"] = window["jQuery"][prop].init };
  obj[prop] = window["jQuery"][prop]
}

obj.$(obj.el)
.html(obj.abc)
.css("color", obj.color);

console.log(obj.method())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<body>abc</body>

继承jquery对象

1 个答案: