Question

如何设置具有多个功能的对象，第二个代码示例就是我要尝试的操作

Object.defineProperty(NodeList.prototype, 'each', {
    value: function (fn) {
        return Array.from(this).forEach((node, index) => fn(node, index))
    }
});

//以下无效

HTMLElement.prototype = {
   hasClass: function(selector) {
   },
   next: function(selector) {
   }
}

Answer 1

改为使用Object.assign：

Object.assign(HTMLElement.prototype, {
  hasClass(selector) {
    return this.classList.contains(selector);
  },
  next(selector) {
    const { nextElementSibling } = this;
    return nextElementSibling && nextElementSibling.matches(selector)
    ? nextElementSibling
    : null;
  }
});

const div = document.querySelector('div');
console.log(div.hasClass('foo'));
console.log(div.next('div'));

<div class="foo"></div>

（也就是说，请注意，对内置原型进行突变不是很好的做法，并且可能导致问题，尤其是当您开始在页面上包含其他脚本时-更好地定义独立函数或制作自己的包装器周围有这种方法的元素）

您还可以使用Object.defineProperties一次定义多个属性，但是所需的代码冗长。

如何在对象原型中设置多功能

1 个答案: