我想通过Object.prototype添加一些自己的方法，以便更轻松地使用我的DOM objects。
我在SO上找到了这个：
- 如何在 JavaScript 中编写扩展方法？ (SO链接(
- 如何使用javascript Object.defineProperty (SO 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.
：
问题(未定义(：
我无法访问给定的对象(通过这个(，它是未定义的。所以我 不能使用 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中，我有一点问题 混合类型。
使用常规函数而不是箭头函数定义函数。
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都会绑定到词汇范围。
感谢 Jakob 给出放弃箭头函数并将"价值"青春期设置为函数的建议。
我还通过类名修复了同级查找器方法。这只是一个例子.
我认为使用查询语句(字符串(而不是类名(字符串(作为过滤器参数(方法参数(可能更方便。
所以这是完整的工作代码...
：
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>