Search code examples
javascriptfunctionclosuresthisarrow-functions

Why extending property of existing object with arrow function fails

Why arrow function fails to identify this pointer in the following case. I know that regular functions have their own execution scope and this but I could not identify why following failed. In the arrow function case, this is undefined. If someone can shed light, it would be great. Thank you!

PS: This code is just for experimental purposes, not anything serious.

const addProperty = function(op, func) {
  String.prototype.__defineGetter__(op, func);
};

// works
addProperty('upper', function() {
  return this.toUpperCase();
});

// fails to identify this
addProperty('lower', () => {
  return this.toLowerCase();
});
Solution

  • Arrow functions preserve the this of the outside scope. function keyword functions, in this context, get the this of the object they're put on. That's just what they do.