JavaScript：通过原型向 DOM-Object 添加方法 - 如：Object.defineProperty(Object.prototype, ...)

Question

我想通过 Object.prototype添加一些自己的方法，以便更轻松地使用我的 DOM objects。

我在 SO 上找到了这个：

How do I write an extension method in JavaScript? (所以link)
how to use javascript Object.defineProperty (所以 link)

:

所以我尝试了一些这样的代码...

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.

:

Problem (this is undefined):

I can't access to the given object (via this), it's undefined. So I can't use the closest() method.

:

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>

:

What I'm looking for:

I simply want to ask: let mySiblings = domObject.getSiblings(); or with a filter-query-param like: let mySiblings = domObject.getSiblings('.classname');. So what I'm looking for is a way to add own methods/functions via prototype to my dom objects.> I need some simple helper methods (like filter, siblings, toggle ...) for my dom objects. The best way will be a

:

About me:

I'm a C#.NET Core developer, so usually I'm using extension methods (like string extensions or what ever). In JS I've a little bit problems with that mixed types.

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

感谢 Jakob 提出放弃箭头函数并将 "value" proberty 设置为函数的建议。

我还通过 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>

JavaScript：通过原型向 DOM-Object 添加方法 - 如：Object.defineProperty(Object.prototype, ...)

JavaScript: adding method to DOM-Object via prototype - like: Object.defineProperty(Object.prototype, ...)

javascript

methods

dom

prototype

defineproperty