Add a function to the prototype with access to "this"

Question

On the one hand I can assign a new function to an object with Object.defineProperty(...).

Then I tried to assign a function directly to the NodeList Prototype. But somehow it doesn't work properly. What am I doing wrong?

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>

Answer 1

Arrow functions () => {...} are not just a different syntax that behaves the same way, they actually handle the this keyword differently.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#arrow_functions_used_as_methods

If you switch to using the traditional function syntax, this will behave as you are expecting.

Additionally, you've defined firstElement as a regular function, not a getter function, so you will need to call it like this

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>