有時，我們可能想要建立一個物件，該物件包含一組資料。如果僅僅是集合，我們可以使用陣列。但是有時，需要儲存 更多狀態，可能就需要儲存更多集合相關的元資料。

一種方式是建立這類物件的新版本，新增元資料屬性和方法，我們可以在物件上新增屬性和方法，包括陣列。然而這種方法效率低，且單調乏味。

我們如何使用簡單物件，並加上我們需要的方法。處理集合的方法在Array物件上，如何引入到我們的自定義的物件上呢？

<input id="first">
<input id="second">

<script>
console.log('---------------------------複用內建的陣列函式--------------------------');
const elems = {
  //用於模擬陣列長度，儲存集體中元素的數量
  length: 0,
  add: function (elem) {
    //實現向集合新增元素的add方法。陣列的原型方法既然已經實現，那麼為什麼不直接使用它。
    Array.prototype.push.call(this, elem);
  },
  gather: function (id) {
    //實現通過ID查詢元素並新增集合中的方法
    this.add(document.getElementById(id));
  },
  find: function (callback) {
    //複用陣列的find方法，實現在集合中查詢元素的方法
    return Array.prototype.find.call(this, callback);
  }
};

elems.gather("first");
if (elems.length === 1 && elems[0].nodeType) {
  console.log("element[0]'s nodeType:" +  elems[0].nodeType + ",id:" + elems[0].id);
  console.log("Verify that we have an element in our stash");
}

elems.gather("second");
if (elems.length === 2 && elems[1].nodeType) {
  console.log("element[1]'s nodeType:" + elems[1].nodeType);
  console.log("Verity the other insertion");
}

let founds = elems.find(elem => elem.id === 'second');
console.log("founds:" + JSON.stringify(founds));
if (founds && founds[0].id === 'second') {
  console.log("We have found our element");
}
</script>
 

出現的問題？

為什麼elems.find(elem => elem.id === 'second')沒有執行成功？

在本例中，我們建立物件，並模擬一些陣列的行為。首先定義length屬性用於儲存元素的數量，與陣列類似。然後定義在末尾新增元素的add方法：

add: function (elem) {

//實現向集合新增元素的add方法。陣列的原型方法既然已經實現，那麼為什麼不直接使用它。

Array.prototype.push.call(this, elem);

}

複用Javascript陣列的方法：Array.prototype.push,而不是自己編寫程式碼。

通常，Array.prototype.push方法通過自身函式上下文執行陣列。但是，我們通過使用call方法，將上下文改為我定義的物件。push方法增加length屬性（類似於陣列的length屬性），為所新增的元素增加編號。通過這種方式，該物件的行為是顛覆性的，也說明可變物件上下文的用途。

add方法接收一個待新增到物件中的元素作為引數。有時可能沒有類似的元素，因此，我們又定義了一個gather方法，該方法更為方便，可以通過ID查詢到元素並新增到物件中。

gather: function (id) {

//實現通過ID查詢元素並新增集合中的方法

this.add(document.getElementById(id));

}

最後，利用內建的陣列方法find方法實現自定義物件的find方法，用於查詢自定義物件中任意元素。

find: function (callback) {

//複用陣列的find方法，實現在集合中查詢元素的方法

return Array.prototype.find.call(this, callback);

}

參考《JavaScript忍者祕籍》