var obj = new CallableObject(); obj(args); A callable object is a data structure that behaves as both an object and a function. You can access and assign properties , call methods , but also call the object directly , as if it were a function. obj.bar obj.foo() obj() The direct call is like calling a method of which has access to the object’s properties through its . obj this context If you have experience with Python you’ll recognize this, there is a builtin Python protocol using the class method. Any method assigned to can be accessed as or as . __call__ __call__ obj.__call__() obj() Callable Objects can also be thought of as stateful functions. Functions are inherently single instance, stateless procedures. Callable Objects are instantiated, stateful procedures. In JavaScript almost everything is an object, including functions, so surely we can do this, but how? It’s not built in to the language like Python, but there are several ways to make it work. The Challenge Taking inspiration from Python, we want to create a Class / constructor that we can use to create callable objects that redirect their calls to a method named . We want this redirect so that we can inherit from our Class and easily override and extend the method with new functionality, without having to worry about the inner workings of the callable object. _call _call To do this, we’re going to need to inherit from the constructor, which inherits from , and allows us to create both an object and a dynamic function. Function Object Our main hurdle is giving a function object a reference to itself. In order to have a reference to the method, the function part of our function object, generated by our Callable class / constructor, must have a reference to itself. _call The Solutions We want to create an extensible class that  maintains proper and correct inheritance in JavaScript, and allows us to call the objects it constructs as functions, with a reference to themselves, redirecting those calls to an overridable method . Callable _call The Bind Way { () { ( , ) ._bound = .bind( ) ._bound
  }
  
  _call(...args) { .log( , args)
  }
} 'use strict' class Callable extends Function constructor super '...args' 'return this._bound._call(...args)' // Or without the spread/rest operator: // super('return this._bound._call.apply(this._bound, arguments)') this this this return this console this Try it out on repl.it Because we’re inheriting from we can create dynamic functions from strings, using in our constructor. So the string we pass to will be the body of our function. We want that function to be able to access its own object and call a method , passing on its arguments. We do this using . Function super super _call bind The bind method will allow us to set the context of a function to whatever we want, by wrapping that function in a transparent bound function. So we bind the function to itself with . this this.bind(this) Now our callable object has a reference to itself, except the object we return from our constructor, returned by , is a wrapped version of our original object. So all our properties will be attached to that, new, wrapped function object, and our function has a reference to the old  object passed to . this.bind bind The easy solution to this is to attach a reference to the new wrapped object on the old object as . And the body of our function, in the string passed to , simply calls using the reference. _bound super _call this._bound Pros Doesn’t rely on deprecated or modern features. No need to modify prototypes. Cons Requires wrapping the function object in a bound function. The Callee Way { () { ( ) }
  
  _call(...args) { .log( , args)
  }
} 'use strict' class Callable extends Function constructor super 'return arguments.callee._call.apply(arguments.callee, arguments)' // We can't use the rest operator because of the strict mode rules. // But we can use the spread operator instead of apply: // super('return arguments.callee._call(...arguments)') console this Try it out on repl.it Again we use the call to create a dynamic function, but his time we get our reference to the function itself by taking advantage of another implicit variable inside a function, the object. super arguments The arguments object has a property that is a reference to the called function. We use this reference as the first argument to which binds the functions context to itself. arguments.callee apply this So inside the function body, the string passed to super, we only need to call the method on . _call arguments.callee Pros Very simple. No need to modify prototypes. Cons and are unavailable in ‘strict mode’, see for more. arguments arguments.callee MDN Modern code should avoid for the / operator. arguments spread rest The Closure & Prototype Way { () { closure = { closure._call(...args) } .setPrototypeOf(closure, .target.prototype)
  }
  
  _call(...args) { .log( , args)
  }
} 'use strict' class Callable extends Function constructor var ( ) function ...args return // Or without the spread/rest operator: // var closure = function() { //   return closure._call.apply(closure, arguments) // } return Object new console this Try it out on repl.it Here instead of creating a dynamic function with , we discard the function object created by the constructor ( the object ), and replace it with a , by returning it instead of from the . super this closure this constructor The closure is also a function object, and can reference itself in its body through the closed over variable. We use the reference to redirect calls to its method . closure closure _call But we’ve broken the prototype chain by replacing with , so we reattach the prototype of the constructor to using and (which is a reference to the constructor) to get the prototype. this closure closure Object.setPrototypeOf new.target You can use instead of , but then you must first call to create the object, which is wasteful. this.constructor.prototype new.target.prototype super this Pros Requires no wrapping of the returned object with a or . Proxy bind Cons Requires modifying prototypes. Modifying prototypes is slow and has other side effects, see . MDN The Proxy Way { () { () ( , { : target._call(...args)
    })
  }
  
  _call(...args) { .log( , args)
  }
} 'use strict' class Callable extends Function constructor super return new Proxy this apply ( ) => target, thisArg, args console this Try it out on repl.it Using we can intercept calls to a function, using the trap, and redirect it to another function. The trap gives our callable a reference to itself as the argument. Proxy apply apply target So we create a Class that inherits from Function, , wrapping the callable objects created in a , trapping any calls made to those objects, and redirecting them to the method on the object itself, using the reference. Callable Proxy _call target Pros Simple, native way to intercept calls and redirect them. No need to modify prototypes. Cons Requires wrapping objects created by in a . Callable Proxy A small performance penalty for using handlers. Proxy What We Learned JavaScript is a remarkably flexible language, and you can bend it into many interesting shapes, like Callable Objects. There may well be use cases for Callable Objects, but in general I wouldn’t recommend using them, it’s not idiomatic JavaScript, and might be confusing or unclear to anyone else using your code. This was mostly just an interesting exercise. References: https://stackoverflow.com/questions/36871299/how-to-extend-function-with-es6-classes/40878674#40878674

Super

Target

Too Long; Didn't Read

Making security fun one episode at a time

Creating Callable Objects in JavaScript

Too Long; Didn't Read

Companies Mentioned

Adrien

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

Creating Callable Objects in JavaScript

Too Long; Didn't Read

Companies Mentioned

Adrien

About Author

TOPICS

Languages

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES