How to extend Function with ES6 classes?

by

The super call will invoke the Function constructor, which expects a code string. If you want to access your instance data, you could just hardcode it:

class Smth extends Function {
  constructor(x) {
    super("return "+JSON.stringify(x)+";");
  }
}

but that’s not really satisfying. We want to use a closure.

Having the returned function be a closure that can access your instance variables is possible, but not easy. The good thing is that you don’t have to call super if you don’t want to – you still can return arbitrary objects from your ES6 class constructors. In this case, we’d do

class Smth extends Function {
  constructor(x) {
    // refer to `smth` instead of `this`
    function smth() { return x; };
    Object.setPrototypeOf(smth, Smth.prototype);
    return smth;
  }
}

But we can do even better, and abstract this thing out of Smth:

class ExtensibleFunction extends Function {
  constructor(f) {
    return Object.setPrototypeOf(f, new.target.prototype);
  }
}

class Smth extends ExtensibleFunction {
  constructor(x) {
    super(function() { return x; }); // closure
    // console.log(this); // function() { return x; }
    // console.log(this.prototype); // {constructor: …}
  }
}
class Anth extends ExtensibleFunction {
  constructor(x) {
    super(() => { return this.x; }); // arrow function, no prototype object created
    this.x = x;
  }
}
class Evth extends ExtensibleFunction {
  constructor(x) {
    super(function f() { return f.x; }); // named function
    this.x = x;
  }
}

Admittedly, this creates an additional level of indirection in the inheritance chain, but that’s not necessarily a bad thing (you can extend it instead of the native Function). If you want to avoid it, use

function ExtensibleFunction(f) {
  return Object.setPrototypeOf(f, new.target.prototype);
}
ExtensibleFunction.prototype = Function.prototype;

but notice that Smth will not dynamically inherit static Function properties.

More Related Contents:

  1. Can you bind ‘this’ in an arrow function?
  2. How does this object method definition work without the “function” keyword?
  3. ES6 destructuring function parameter – naming root object
  4. How to extend a class without having to use super in ES6?
  5. What is “function*” in JavaScript?
  6. Proper use of const for defining functions
  7. JavaScript ES6: Test for arrow function, built-in function, regular function?
  8. Immediate function using JavaScript ES6 arrow functions
  9. Why can I not use `new` with an arrow function in JavaScript/ES6?
  10. JavaScript Extending Class
  11. Find all values by specific key in a deep nested object
  12. Typescript: can not access member value in inherited class constructor
  13. Why does `obj.foo = function() { };` not assign the name `foo` to the function?
  14. How can I write a function that will format a camel cased string to have spaces?
  15. What is the use of the JavaScript ‘bind’ method?
  16. JavaScript Inheritance [closed]
  17. How can I create every combination possible for the contents of two arrays?
  18. Declaring static constants in ES6 classes?
  19. ES6 Class: access to ‘this’ with ‘addEventListener’ applied on method [duplicate]
  20. this value in JavaScript anonymous function
  21. Pseudo-classical inheritance with privacy?
  22. Performing inheritance in JavaScript
  23. map function not working in React
  24. The reason to use JS .call() method?
  25. Split a Javascript class (ES6) over multiple files?
  26. Can you create functions with custom prototypes in JavaScript?
  27. Use JavaScript variable as function name?
  28. Re-export default in ES 6 modules
  29. gulp babel, exports is not defined
  30. Why will ES6 WeakMap’s not be enumerable?

Leave a Comment