Have the niceties of extended prototype without actually extending the prototype

Question

What I'm trying to do is have an interface where you can wrap an element into an instance which has an extended prototype, so something like.

const wrappedButton = new WrappedElem(document.getElementById('some-button'))
// we have access to our custom added method:
console.log(`I am the ${wrappedButton.siblingIndex()}th button`)

// but we still have access to the original methods
wrappedButton.addEventListener('click', function(e){
  console.log('I clicked on', e.target)
  // right here we won't have access to siblingIndex, because the prototype of the element itself was not changed.
})

I can extend the original prototype like this

HTMLElement.prototype.siblingIndex = function() {
    if(this.parentNode == null) {
        return -1
    }
    
    return Array.prototype.indexOf.call(this.parentNode.children, this)
}

But extending the prototype is bad practice, and bad performance.

So it possible to do something like this?

Answer 1

By using a Proxy we can add a new method without protoype changes :

const siblingIndex = () => {}

const handler = {
    get(target, property) {
        
        if(property === 'siblingIndex') {
            return siblingIndex;
        }

        return target[property];
    }
}

const proxyButton = new Proxy(button, handler);

// we can also call the siblingIndex function
proxyButton.siblingIndex();
// we can access the properties of the underlying object
proxyButton.tagName;

e.target however will not return the proxy but the original object, but you can just use proxyButton instead of e.target

if you want you can also override the addEventListener method to return the proxied version instead when the callback is called