javascript - 添加原生数组原型(prototype)方法

Question

我想在Array.prototype中添加两个方法，其工作方式有点像jQuery的addClass/removeClass。这是我写的:

Array.prototype.addClass = function (className) {
  this.forEach((element) => {
    element.classList.add(className);
  });
};

Array.prototype.removeClass = function (className) {
  this.forEach((element) => {
    element.classList.remove(className);
  });
};

有人告诉我，向内置 JS 原型(prototype)添加方法通常是一个坏主意，所以我想知道避免潜在陷阱的最佳替代方案是什么。

我的想法:

1. 检查该方法是否已存在
2. 只需创建一个带有 2 个参数的普通函数:数组和类名
3. 创建新的自定义对象，该对象将具有我构建的 DOM 操作方法

我也在看https://github.com/franciscop/umbrella/blob/master/src/plugins/addclass/addclass.js以及它是如何实现的。

Answer 1

是的，有时我们喜欢在内置 JS 原型(prototype)中添加一些额外的方法。在这些情况下，我检查它是否已经存在，如果不存在，您应该使用 Object.defineProperty 以便该方法不可枚举:

if (!Array.prototype.addClass)
Object.defineProperty(Array.prototype, 'addClass', {
    value: function(className) {
        this.forEach((element) => {
            element.classList.add(className);
        });
    }
})

您可以检查 mozilla's documentation 中的所有选项.