javascript - 向现有 Javascript 对象添加方法的最佳方式

Question

我收到了一个 ajax 文档提要，看起来像这样(大大简化):

aDocs = [{title:'new doc', ext:'pdf'}, {title:'another', ext:'xlsx'}];

我将遍历 aDocs 数组并显示有关每个文档的信息，同时向每个文档添加一些方法，这些方法将允许修改用于显示的 HTML 并进行 API 调用以更新数据库。

我读了here为了向现有对象添加方法，您可以使用 __proto__ 属性。类似的东西:

function Doc(){}
Doc.prototype.getExt = function(){return this.ext}
Doc.prototype.getTitle = function(){return this.title}
for (var i=0; i<aDocs.length; i++){
  aDocs[i].__proto__ = Doc.prototype
}

根据上面那篇文章，这不是官方的 javascript，不受 IE 支持(永远不会)，并且可能会在 webkit 浏览器中被弃用。

这是另一种尝试:

function getExt(){ return this.ext }
function getTitle(){return this.title}
for (var i=0; i<aDocs.length; i++){
  aDocs[i].getExt = getExt;
  aDocs[i].getTitle = getTitle;
}

这第二种选择可行且有效吗？还是我重新创建了这些函数，从而产生了多余的开销？

再次简化了上面的例子(我知道aDocs[i].ext会解决上面的问题，但是我的显示和API调用的方法比较复杂)。

Answer 1

Is this second alternative viable and efficient?

是的。

Or am I re-creating those functions and thereby creating redundant overhead?

不，函数是重复使用的，而不是重新创建的。所有对象将共享 getExt 和 getTitle 函数的单个副本。在调用来自(比如)aDocs[1] 的函数期间，在调用中，this 将引用函数附加到的对象。 (这仅适用于当您将其作为从对象检索它的表达式的一部分调用时，例如 var title = aDocs[1].getTitle();)

或者，如果您愿意，您可以创建共享原型(prototype)的新对象，并将属性从 aDocs 对象复制到新对象，但您已经询问过将新函数分配给 < em>现有对象，所以...