具有函数与对象的Javascript对象原型[重复]答案

【问题标题】：Javascript Object Prototype with function vs object [duplicate]具有函数与对象的Javascript对象原型[重复]
【发布时间】：2019-11-30 03:40:06
【问题描述】：

通常我们可以这样做：

HTMLElement.prototype.myFunc = function(){...}

我的问题是，这样做可以吗：

var myObj = {
    foo:function(){...},
    bar:function(){...}
}
HTMLElement.prototype.myFunc = myObj;

上述方法确实有效，但这样做是否安全/有效？有什么优点/缺点？任何建议都非常感谢。谢谢。

【问题讨论】：

我不确定你想用它做什么。我会说扩展内置对象虽然它是prototype，但出于某种原因在性能和可维护性方面是一个坏主意。我在 SO 上找到了相关帖子：stackoverflow.com/questions/14034180/…
不，将对象放在原型上根本不起作用。
请不要扩展原生对象。如果要扩展其他对象，可以使用Object.assign(prototypeOrObjectOfYourObject, { foo(){}, bar(){} }。
我知道，自 2011 年以来，许多帖子都将原生元素原型设计视为不好的做法，2019 年，我想知道对这个主题的看法是否有任何改变或改进。或者是“读取过多堆栈溢出”的情况。

标签： javascript function object prototype prototyping

【解决方案1】：

我认为这两种方法都不是一个好主意，因为它会改变内置原型，这可能会导致问题。页面上的其他代码可能不希望 myFunc 存在于 HTMLElement.prototype 上。您的页面越复杂，包含的库越多，当您更改不应该更改的常见对象时，您的代码就越脆弱。更糟糕的是，如果页面上的某些 other 代码遵循类似的不良做法并尝试自行添加 HTMLElement.prototype.myFunc 怎么办？然后您的页面将（几乎可以肯定）中断。

同样，一些改变内置原型的网站是导致 Array.prototype.flatten 和 Array.prototype.contains 提案失败的原因 - 在发现结果，很少有遵循不良做法的网站崩溃。这种情况是不可取的。最好 avoid changing built-in objects，除非更改添加了现代浏览器已经拥有的符合规范的属性/方法，就像 polyfills 所做的那样。

如果可能，请考虑一种不同的方法，也许就像 jQuery 那样 - 可以通过包装函数传递元素，而不是改变 HTMLElement.prototype，该函数返回一个具有 foo 和 bar 方法的对象。

【讨论】：