JavaScript：通过原型向DOM-Object添加方法--比如。Object.defineProperty(Object.prototype,...) [重复]

Question

这个问题在这里已经有了答案:

ES6对象中的方法：使用箭头函数 (5个答案)

封闭 上月.

我想... 自创方法 通过 Object.prototype 以方便我的工作 DOM objects.

我在SO上找到这个。

• 我如何在JavaScript中写一个扩展方法？(SO链接)
• 如何使用javascript对象.defineProperty？ (SO链接)

:

所以我试着写了这样的代码......

js代码 (没有工作):

Object.defineProperty(Object.prototype, 'getSiblings', {
    value: (filteredByClassName) => {
        let siblings = [];
        let sibling = this.closest(filteredByClassName).firstChild;
        while (sibling) {
            if (sibling.nodeType === 1 && sibling !== this && ((filteredByClassName)?(sibling.classList.contains(filteredByClassName)):true)) {
                siblings.push(sibling);
            }
            sibling = sibling.nextSibling
        }
        return siblings;
    },
    writable: true,
    configurable: true
});

let activeCultureName = document.querySelector('.page .cultures.active p.name'); //important: source is not the ".culture" div element itself, it's a children (e.g. <p class="name">) of
let inactiveCultureSiblings = activeCulture.getSiblings('.culture'); //get all ".culture" div elements, instead of the active.

:

* 问题 (此为未定义):

我不能访问给定的对象（通过this），它是未定义的。所以我不能使用closest()方法。

:

html代码 譬如:

<div class="page">
    <div class="culture">
        <p class="name"> de-DE </p>
    </div>
    <div class="culture">
        <p class="name"> en-GB </p>
    </div>
    <div class="culture active">
        <p class="name"> en-US </p>
    </div>
    <div class="culture">
        <p class="name"> pl-PL </p>
    </div>
</div>

:

* 我在寻找什么。

我只是想问： let mySiblings = domObject.getSiblings(); 或者用一个过滤查询参数，比如：

let mySiblings =
  domObject.getSiblings('.classname');

. 所以，我想找的是一种方法来 通过原型添加自己的方法函数 我需要一些简单的辅助方法（如过滤、同级、切换......）来帮助我的dom对象。最好的方法是在我的dom对象上添加一个

:

关于我。

我是一名C#.NET Core开发者，所以通常我都是使用扩展方法（比如字符串扩展或其他什么）。在JS中，我对这种混合类型有一点问题。

Answer 1

用常规函数而不是箭头函数来定义你的函数。

Object.defineProperty(Object.prototype, 'getSiblings', {
  value(filteredByClassName) {
    let siblings = [];

    // Now `this` will work
    let sibling = this.closest(filteredByClassName).firstChild;
    while (sibling) {
      if (sibling.nodeType === 1 && sibling !== this && ((filteredByClassName)?(sibling.classList.contains(filteredByClassName)):true)) {
        siblings.push(sibling);
      }
      sibling = sibling.nextSibling
    }
    return siblings;
  },
  writable: true,
  configurable: true
});

否则 this 无论你怎么做，都会被绑定在词法范围内。

Answer 2

感谢 雅各布 给我的建议是放弃箭头函数，把 "value "proberty设置为函数。

我还修正了按className查找兄弟姐妹的方法。这只是一个例子。我认为用查询语句（字符串）代替className（字符串）作为过滤参数（方法参数）可能更方便。

所以这里是完整的工作代码...

:

js代码:

Object.defineProperty(Object.prototype, 'getSiblings', {
    value(filteredByClassName) {
        let closest = this.closest('.'+filteredByClassName);
        let siblings = [];
        let sibling = closest.parentElement.firstChild;
        while (sibling) {
            if (sibling.nodeType === 1 && sibling !== this && ((filteredByClassName)?(sibling.classList && closest.classList!==sibling.classList && sibling.classList.contains(filteredByClassName)):true)) { //} && ((filteredByClassName)?(sibling.classList.contains(filteredByClassName)):true)) {
                siblings.push(sibling);
            }
            sibling = sibling.nextSibling
        }
        alert('siblings.length: '+siblings.length);
        return siblings;
    },
    writable: true,
    configurable: true
});

let activeCultureName = document.querySelector('.page .cultures.active p.name');
let inactiveCultureSiblings = activeCulture.getSiblings('.culture');

:

html代码 譬如:

<div class="page">
    <div class="culture">
        <p class="name"> de-DE </p>
    </div>
    <div class="culture">
        <p class="name"> en-GB </p>
    </div>
    <div class="culture active">
        <p class="name"> en-US </p>
    </div>
    <div class="culture">
        <p class="name"> pl-PL </p>
    </div>
</div>