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原型时添加方法通常是一个坏主意，所以我想知道最好的替代方案是什么来避免潜在的陷阱。

我的想法：

检查方法是否已存在
只需创建一个带有2个参数的正常函数，即数组和类名
创建我的新自定义对象，它将具有我构建的DOM操作方法

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

Answer 1

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

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

您可以查看mozilla's documentation中的所有选项。

添加Native Array原型方法

1 个答案: