如何在 jQuery/JavaScript 中扩展返回的对象

Question

我想从 jQuery 的 $.parseXML() 函数返回的 XML 文档中 extend/derive 添加我自己的 properties/functions。我是 jQuery/JavaScript 对象继承的新手。我试图阅读整个网络，但不是 "getting"。

例如，在 C# 中类我可以这样写一些东西（保持简单）：

public class MyXmlDocument : XmlDocument
{
  public MyXmlDocument(string xmlText)
  {
    this.LoadXml(xmlText);
  }

  public string SomeVariable;
  ...

  public XmlNode FindCertainNode()
  {
    return this.SelectSingleNode("certain");
  }
  ...
}

MyXmlDocument xmlDoc = new MyXmlDocument(xmlText);
xmlDoc.AppendChild(...);  // XmlDocument method
XmlNode xmlNode = xmlDoc.FindCertainNode();  // MyXmlDocument method
etc.

我犹豫要不要展示我的jQuery/JavaScript尝试，因为我很迷茫，但我知道人们喜欢看东西，所以请把它当作"some ideas I have been playing with":

// One approach
function XMLDoc(xmlText)
{
  var parseXML = function (xmlText)
  {
    //var parser = new DOMParser();
    //var xmlDoc = parser.parseFromString(xmlText, "text/xml");
    var xmlDoc = $.parseXML(xmlText);
    return xmlDoc;
  };

  var findCertainNode = function ()
  {
    return this.find('certain');
  }

  return parseXML(xmlText);
}

// Another approach
var XMLDoc = $.extend({}, $.parseXML.prototype, {
  findCertainNode: function () {
    this.find('certain');
  }
});

我希望能够访问 XML 文档的现有功能以及我自己的扩展，如下所示：

var xmlDoc = new XMLDoc(xmlText);
var $xmlDoc = $(xmlDoc);
$xmlDoc.find('certain');  // jQuery method
$xmlDoc.findCertainNode();  // my additional method

我也知道我不清楚我的代码应该返回纯 JavaScript 对象还是 jQuery 对象。我在想 jQuery 的，这样我就可以很容易地调用 jQuery 的 .find() 等

对我来说重要的是代码应该全部包装在一个 function/object 或类似的 editing/viewing 中，就像我的两次尝试一样。

如果有人能展示他们将如何实现 C# 模式，我认为这将回答我的问题，我将不胜感激。

编辑：解决方案

我将下面的@Karol 解决方案 () 标记为已接受的解决方案，因为他做了最多的工作来回答我的问题。

但是，我已经意识到从$.parseXML()/DOMParser().parseFromString()返回的对象并不是什么特殊的"XML document"，它只是一个元素，因此没有特殊的方法.从它 derive/inherit 是不值得的，所以 encapsulation 就足够了，也更简单。我的模式看起来像：

var XMLDoc = function (xmlText) {
  this._xmlDoc = $.parseXML(xmlText);
};

$.extend(XMLDoc.prototype, {
    doc: this._xmlDoc,
    find: function (selector) {
      return $(this._xmlDoc).find(selector);
    },
    findCertain: function () {
      return $(this._xmlDoc).find("certain");
    },
    ...
});

var xmlDoc = new XMLDoc(xmlText);
xmlDoc.find('something');
xmlDoc.findCertainNode();

Answer 1

试试：

var xmlDoc = new XMLDoc(xmlText);
$.extend( xmlDoc, {
  find: function(par){
          // your function
        }
});

Answer 2

尝试这样做：

function XMLDoc(xmlText) { //constructor
  this._xmlDoc = $.parseXML(xmlText); //'_' is JS convention for private fields
}
XMLDoc.prototype = {
  findCertainNode: function() {
    return $(this._xmlDoc).find('certain');
  }
  /* other methods here */
}

var myXML = new XMLDoc('<a><certain /></a>')
myXML.findCertainNode(); //[<certain />]

或与ES6语法相同：

class XMLDoc {
  constructor(xmlText) {
    this._xmlDoc = $.parseXML(xmlText);
  }
  findCertainNode() {
    return $(this._xmlDoc).find('certain');
  }
}

var myXML = new XMLDoc('<a><certain /></a>')
myXML.findCertainNode(); //[<certain />]

我认为从jQuery真正继承是不可能的，但如果你真的想有能力以C#方式使用它，你可以这样做：

Object.keys(Object.getPrototypeOf($())).forEach(function(key){
  XMLDoc.prototype[key] = function() {
    return $(this._xmlDoc)[key].apply(null, arguments);
  }
})

或者在 ES6 中：

Object.keys(Object.getPrototypeOf($())).forEach(key => {
  XMLDoc.prototype[key] = () => {
    return $(this._xmlDoc)[key](...arguments);
  }
})

然后您可以触发所有 jQuery 继承的方法。

如果你想重载其中的一些，记得在上面的代码之后做这个重载。

如何在 jQuery/JavaScript 中扩展返回的对象

How to extend returned object in jQuery/JavaScript

javascript

jquery

extend

prototypal-inheritance