如何在JS嵌套Element.prototype函数中获取引用的DOM元素？

问题场景 #

我们给DOM元素定义了嵌套的自定义函数，用于后续扩展createIdx、removeIdx等操作，但调用时this指向了window而非目标元素：

Element.prototype.idx = {};

Object.defineProperty(Element.prototype.idx, 'createIdx', {
    value: function(){
        console.log(this); // 输出window而非目标DOM元素
        this.id='x';
    }
});

// 调用方式
const a = document.activeElement; // <body></body>
a.idx.createIdx();

核心原因 #

idx是挂载在Element.prototype上的普通对象，调用a.idx.createIdx()时，函数的this默认指向idx对象；若运行在非严格模式下，当函数调用上下文丢失时，this会隐式绑定到window，导致无法操作目标DOM元素。

解决方案 #

方案1：将idx定义为Getter，通过闭包绑定元素上下文 #

把idx设置为Element.prototype的getter属性，每次访问a.idx时，返回一个通过闭包绑定当前DOM元素的对象，确保内部函数能直接操作目标元素：

Object.defineProperty(Element.prototype, 'idx', {
    get: function() {
        const element = this; // 保存当前DOM元素的引用
        return {
            createIdx: function() {
                console.log(element); // 输出目标DOM元素
                element.id = 'x';
            },
            // 后续可添加扩展函数，同样通过element访问目标元素
            removeIdx: function() {
                element.id = '';
            }
        };
    }
});

// 调用方式不变，element指向目标元素
const a = document.activeElement;
a.idx.createIdx();

方案2：手动绑定this（临时应急方案） #

如果只是临时调试，可在调用时通过call或apply手动指定this指向目标元素，但这种方式每次调用都需要绑定，不适合后续扩展多个函数的场景：

const a = document.activeElement;
a.idx.createIdx.call(a); // 手动将this绑定为目标元素

方案说明 #

方案1是更优选择，它通过getter每次返回绑定当前元素的上下文对象，后续添加removeIdx等函数时，只需在返回的对象中新增方法，所有方法都能通过闭包访问到目标DOM元素，无需额外绑定操作。

内容的提问来源于stack exchange，提问作者John Miller