Por un lado, puedo asignar una nueva función a un objeto con Object.defineProperty(...) .
Luego traté de asignar una función directamente al prototipo NodeList. Pero de alguna manera no funciona correctamente. ¿Qué estoy haciendo mal?
Object.defineProperty( NodeList.prototype, 'lastElement', { get: function() { return this[this.length - 1].textContent; } } ); NodeList.prototype.firstElement = () => { return this[0].textContent; } const h = document.querySelectorAll('span'); console.log('#last:', h.lastElement); console.log('#first:', h.firstElement); <div> <span>1</span> <span>2</span> </div>Las funciones de flecha () => {...} no son solo una sintaxis diferente que se comporta de la misma manera, en realidad manejan this palabra clave de manera diferente.
Si cambia a usar la sintaxis de función tradicional, this comportará como espera.
Además, ha definido firstElement como una función regular, no como una función getter, por lo que deberá llamarlo así
console.log('#first:', h.firstElement()); Object.defineProperty( NodeList.prototype, 'lastElement', { get: function() { return this[this.length - 1].textContent; } } ); NodeList.prototype.firstElement = function() { return this[0].textContent; } const h = document.querySelectorAll('span'); console.log('#last:', h.lastElement); console.log('#first:', h.firstElement()); <div> <span>1</span> <span>2</span> </div>