如何在jQuery / JavaScript中擴展返回的對象

Question

我想從jQuery的$.parseXML()函數返回的XML文檔中擴展/派生，以添加我自己的屬性/函數。 我是jQuery / JavaScript對象繼承的新手。 我試圖閱讀整個網絡，但沒有“了解”它。

在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嘗試，因為我正處於海上航行，但是我知道人們喜歡看到一些東西，因此請將其視為“我一直在使用的一些想法”：

// 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()等。

對我來說很重要，就像我的兩次嘗試一樣，都應將代碼全部包裝在一個函數/對象或類似物中以進行編輯/查看。

如果有人可以展示他們將如何實現C＃模式，我認為這將回答我的問題，我應該非常感謝。

編輯：解決方案

我在下面將@Karol的解決方案（ https://stackoverflow.com/a/42672481/489865 ）標記為可以接受的解決方案，因為他在回答我提出的問題方面做得最多。

但是，我已經意識到從$.parseXML() / DOMParser().parseFromString()返回的對象不是某些特殊的“ XML文檔”，它只是一個元素，因此沒有特殊的方法。 從它派生/繼承是不值得的，因此封裝是足夠且簡單的。 我的模式如下：

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方法被繼承時觸發它們。

而且，如果您想重載其中的一些，請記住在上面的代碼之后進行此重載。