ES6 allows to extend special objects. So it's possible to inherit from the function. Such object can be called as a function, but how can I implement the logic for such call?
class Smth extends Function {
constructor (x) {
// What should be done here
super();
}
}
(new Smth(256))() // to get 256 at this call?
Any method of class gets reference to the class instance via this. But when it is called as a function, this refers to window. How can I get the reference to the class instance when it is called as a function?
PS: Same question in Russian.
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.
This is an approach to creating callable objects that correctly reference their object members, and maintain correct inheritance,
without messing with prototypes.
Simply:
class ExFunc extends Function {
constructor() {
super('...args', 'return this.__self__.__call__(...args)')
var self = this.bind(this)
this.__self__ = self
return self
}
// Example `__call__` method.
__call__(a, b, c) {
return [a, b, c];
}
}
Extend this class and add a __call__ method, more below...
An explanation in code and comments:
// This is an approach to creating callable objects
// that correctly reference their own object and object members,
// without messing with prototypes.
// A Class that extends Function so we can create
// objects that also behave like functions, i.e. callable objects.
class ExFunc extends Function {
constructor() {
super('...args', 'return this.__self__.__call__(...args)');
// Here we create a function dynamically using `super`, which calls
// the `Function` constructor which we are inheriting from. Our aim is to create
// a `Function` object that, when called, will pass the call along to an internal
// method `__call__`, to appear as though the object is callable. Our problem is
// that the code inside our function can't find the `__call__` method, because it
// has no reference to itself, the `this` object we just created.
// The `this` reference inside a function is called its context. We need to give
// our new `Function` object a `this` context of itself, so that it can access
// the `__call__` method and any other properties/methods attached to it.
// We can do this with `bind`:
var self = this.bind(this);
// We've wrapped our function object `this` in a bound function object, that
// provides a fixed context to the function, in this case itself.
this.__self__ = self;
// Now we have a new wrinkle, our function has a context of our `this` object but
// we are going to return the bound function from our constructor instead of the
// original `this`, so that it is callable. But the bound function is a wrapper
// around our original `this`, so anything we add to it won't be seen by the
// code running inside our function. An easy fix is to add a reference to the
// new `this` stored in `self` to the old `this` as `__self__`. Now our functions
// context can find the bound version of itself by following `this.__self__`.
self.person = 'Hank'
return self;
}
// An example property to demonstrate member access.
get venture() {
return this.person;
}
// Override this method in subclasses of ExFunc to take whatever arguments
// you want and perform whatever logic you like. It will be called whenever
// you use the obj as a function.
__call__(a, b, c) {
return [this.venture, a, b, c];
}
}
// A subclass of ExFunc with an overridden __call__ method.
class DaFunc extends ExFunc {
constructor() {
super()
this.a = 'a1'
this.b = 'b2'
this.person = 'Dean'
}
ab() {
return this.a + this.b
}
__call__(ans) {
return [this.ab(), this.venture, ans];
}
}
// Create objects from ExFunc and its subclass.
var callable1 = new ExFunc();
var callable2 = new DaFunc();
// Inheritance is correctly maintained.
console.log('\nInheritance maintained:');
console.log(callable2 instanceof Function); // true
console.log(callable2 instanceof ExFunc); // true
console.log(callable2 instanceof DaFunc); // true
// Test ExFunc and its subclass objects by calling them like functions.
console.log('\nCallable objects:');
console.log( callable1(1, 2, 3) ); // [ 'Hank', 1, 2, 3 ]
console.log( callable2(42) ); // [ 'a1b2', Dean', 42 ]
// Test property and method access
console.log(callable2.a, callable2.b, callable2.ab())
View on repl.it
Further explanation of bind:
function.bind() works much like function.call(), and they share a similar method signature:
fn.call(this, arg1, arg2, arg3, ...); more on mdn
fn.bind(this, arg1, arg2, arg3, ...); more on mdn
In both the first argument redefines the this context inside the function. Additional arguments can also be bound to a value.
But where call immediately calls the function with the bound values, bind returns an "exotic" function object that transparently wraps the original, with this and any arguments preset.
So when you define a function then bind some of its arguments:
var foo = function(a, b) {
console.log(this);
return a * b;
}
foo = foo.bind(['hello'], 2);
You call the bound function with only the remaining arguments, its context is preset, in this case to ['hello'].
// We pass in arg `b` only because arg `a` is already set.
foo(2); // returns 4, logs `['hello']`
You can wrap the Smth instance in a Proxy with an apply (and maybe construct) trap:
class Smth extends Function {
constructor (x) {
super();
return new Proxy(this, {
apply: function(target, thisArg, argumentsList) {
return x;
}
});
}
}
new Smth(256)(); // 256
Update:
Unfortunately this doesn't quite work because it's now returning a function object instead of a class, so it seems this actually can't be done without modifying the prototype. Lame.
Basically the problem is there is no way of setting the this value for the Function constructor. The only way to really do this would be to use the .bind method afterwards, however this is not very Class-friendly.
We could do this in a helper base class, however this does does not become available until after the initial super call, so it's a bit tricky.
Working Example:
'use strict';
class ClassFunction extends function() {
const func = Function.apply(null, arguments);
let bound;
return function() {
if (!bound) {
bound = arguments[0];
return;
}
return func.apply(bound, arguments);
}
} {
constructor(...args) {
(super(...args))(this);
}
}
class Smth extends ClassFunction {
constructor(x) {
super('return this.x');
this.x = x;
}
}
console.log((new Smth(90))());
(Example requires modern browser or node --harmony.)
Basically the base function ClassFunction extends will wrap the Function constructor call with a custom function which is similar to .bind, but allows binding later, on the first call. Then in the ClassFunction constructor itself, it calls the returned function from super which is now the bound function, passing this to finish setting up the custom bind function.
(super(...))(this);
This is all quite a bit complicated, but it does avoid mutating the prototype, which is considered bad-form for optimization reasons and can generate warnings in browser consoles.
I took the advice from Bergi's answer and wrapped it into an NPM module.
var CallableInstance = require('callable-instance');
class ExampleClass extends CallableInstance {
constructor() {
// CallableInstance accepts the name of the property to use as the callable
// method.
super('instanceMethod');
}
instanceMethod() {
console.log("instanceMethod called!");
}
}
var test = new ExampleClass();
// Invoke the method normally
test.instanceMethod();
// Call the instance itself, redirects to instanceMethod
test();
// The instance is actually a closure bound to itself and can be used like a
// normal function.
test.apply(null, [ 1, 2, 3 ]);
This is the solution I've worked out that serves all my needs of extending functions and has served me quite well. The benefits of this technique are:
When extending ExtensibleFunction, the code is idiomatic of extending any ES6 class (no, mucking about with pretend constructors or proxies).
The prototype chain is retained through all subclasses, and instanceof / .constructor return the expected values.
.bind() .apply() and .call() all function as expected. This is done by overriding these methods to alter the context of the "inner" function as opposed to the ExtensibleFunction (or it's subclass') instance.
.bind() returns a new instance of the functions constructor (be it ExtensibleFunction or a subclass). It uses Object.assign() to ensure the properties stored on the bound function are consistent with those of the originating function.
Closures are honored, and arrow functions continue to maintain the proper context.
The "inner" function is stored via a Symbol, which can be obfuscated by modules or an IIFE (or any other common technique of privatizing references).
And without further ado, the code:
// The Symbol that becomes the key to the "inner" function
const EFN_KEY = Symbol('ExtensibleFunctionKey');
// Here it is, the `ExtensibleFunction`!!!
class ExtensibleFunction extends Function {
// Just pass in your function.
constructor (fn) {
// This essentially calls Function() making this function look like:
// `function (EFN_KEY, ...args) { return this[EFN_KEY](...args); }`
// `EFN_KEY` is passed in because this function will escape the closure
super('EFN_KEY, ...args','return this[EFN_KEY](...args)');
// Create a new function from `this` that binds to `this` as the context
// and `EFN_KEY` as the first argument.
let ret = Function.prototype.bind.apply(this, [this, EFN_KEY]);
// For both the original and bound funcitons, we need to set the `[EFN_KEY]`
// property to the "inner" function. This is done with a getter to avoid
// potential overwrites/enumeration
Object.defineProperty(this, EFN_KEY, {get: ()=>fn});
Object.defineProperty(ret, EFN_KEY, {get: ()=>fn});
// Return the bound function
return ret;
}
// We'll make `bind()` work just like it does normally
bind (...args) {
// We don't want to bind `this` because `this` doesn't have the execution context
// It's the "inner" function that has the execution context.
let fn = this[EFN_KEY].bind(...args);
// Now we want to return a new instance of `this.constructor` with the newly bound
// "inner" function. We also use `Object.assign` so the instance properties of `this`
// are copied to the bound function.
return Object.assign(new this.constructor(fn), this);
}
// Pretty much the same as `bind()`
apply (...args) {
// Self explanatory
return this[EFN_KEY].apply(...args);
}
// Definitely the same as `apply()`
call (...args) {
return this[EFN_KEY].call(...args);
}
}
/**
* Below is just a bunch of code that tests many scenarios.
* If you run this snippet and check your console (provided all ES6 features
* and console.table are available in your browser [Chrome, Firefox?, Edge?])
* you should get a fancy printout of the test results.
*/
// Just a couple constants so I don't have to type my strings out twice (or thrice).
const CONSTRUCTED_PROPERTY_VALUE = `Hi, I'm a property set during construction`;
const ADDITIONAL_PROPERTY_VALUE = `Hi, I'm a property added after construction`;
// Lets extend our `ExtensibleFunction` into an `ExtendedFunction`
class ExtendedFunction extends ExtensibleFunction {
constructor (fn, ...args) {
// Just use `super()` like any other class
// You don't need to pass ...args here, but if you used them
// in the super class, you might want to.
super(fn, ...args);
// Just use `this` like any other class. No more messing with fake return values!
let [constructedPropertyValue, ...rest] = args;
this.constructedProperty = constructedPropertyValue;
}
}
// An instance of the extended function that can test both context and arguments
// It would work with arrow functions as well, but that would make testing `this` impossible.
// We pass in CONSTRUCTED_PROPERTY_VALUE just to prove that arguments can be passed
// into the constructor and used as normal
let fn = new ExtendedFunction(function (x) {
// Add `this.y` to `x`
// If either value isn't a number, coax it to one, else it's `0`
return (this.y>>0) + (x>>0)
}, CONSTRUCTED_PROPERTY_VALUE);
// Add an additional property outside of the constructor
// to see if it works as expected
fn.additionalProperty = ADDITIONAL_PROPERTY_VALUE;
// Queue up my tests in a handy array of functions
// All of these should return true if it works
let tests = [
()=> fn instanceof Function, // true
()=> fn instanceof ExtensibleFunction, // true
()=> fn instanceof ExtendedFunction, // true
()=> fn.bind() instanceof Function, // true
()=> fn.bind() instanceof ExtensibleFunction, // true
()=> fn.bind() instanceof ExtendedFunction, // true
()=> fn.constructedProperty == CONSTRUCTED_PROPERTY_VALUE, // true
()=> fn.additionalProperty == ADDITIONAL_PROPERTY_VALUE, // true
()=> fn.constructor == ExtendedFunction, // true
()=> fn.constructedProperty == fn.bind().constructedProperty, // true
()=> fn.additionalProperty == fn.bind().additionalProperty, // true
()=> fn() == 0, // true
()=> fn(10) == 10, // true
()=> fn.apply({y:10}, [10]) == 20, // true
()=> fn.call({y:10}, 20) == 30, // true
()=> fn.bind({y:30})(10) == 40, // true
];
// Turn the tests / results into a printable object
let table = tests.map((test)=>(
{test: test+'', result: test()}
));
// Print the test and result in a fancy table in the console.
// F12 much?
console.table(table);
Edit
Since I was in the mood, I figured I'd publish a package for this on npm.
Firstly I came to solution with arguments.callee, but it was awful.
I expected it to break in global strict mode, but seems like it works even there.
class Smth extends Function {
constructor (x) {
super('return arguments.callee.x');
this.x = x;
}
}
(new Smth(90))()
It was a bad way because of using arguments.callee, passing the code as a string and forcing its execution in non-strict mode. But than idea to override apply appeared.
var global = (1,eval)("this");
class Smth extends Function {
constructor(x) {
super('return arguments.callee.apply(this, arguments)');
this.x = x;
}
apply(me, [y]) {
me = me !== global && me || this;
return me.x + y;
}
}
And the test, showing I'm able to run this as function in different ways:
var f = new Smth(100);
[
f instanceof Smth,
f(1),
f.call(f, 2),
f.apply(f, [3]),
f.call(null, 4),
f.apply(null, [5]),
Function.prototype.apply.call(f, f, [6]),
Function.prototype.apply.call(f, null, [7]),
f.bind(f)(8),
f.bind(null)(9),
(new Smth(200)).call(new Smth(300), 1),
(new Smth(200)).apply(new Smth(300), [2]),
isNaN(f.apply(window, [1])) === isNaN(f.call(window, 1)),
isNaN(f.apply(window, [1])) === isNaN(Function.prototype.apply.call(f, window, [1])),
] == "true,101,102,103,104,105,106,107,108,109,301,302,true,true"
Version with
super('return arguments.callee.apply(arguments.callee, arguments)');
in fact contains bind functionality:
(new Smth(200)).call(new Smth(300), 1) === 201
Version with
super('return arguments.callee.apply(this===(1,eval)("this") ? null : this, arguments)');
...
me = me || this;
makes call and apply on window inconsistent:
isNaN(f.apply(window, [1])) === isNaN(f.call(window, 1)),
isNaN(f.apply(window, [1])) === isNaN(Function.prototype.apply.call(f, window, [1])),
so the check should be moved into apply:
super('return arguments.callee.apply(this, arguments)');
...
me = me !== global && me || this;
Generalizing Oriol's answer:
class Smth extends Function {
constructor(x) {
super();
this.x = x;
return new Proxy(this, {
apply: (target, that, args) => target.__call__(...args)
});
}
__call__(v) {
return this.x * v;
}
}
There is a simple solution which takes advantage of JavaScript's functional capabilities: Pass the "logic" as a function-argument to the constructor of your class, assign the methods of that class to that function, then return that function from the constructor as the result:
class Funk
{
constructor (f)
{ let proto = Funk.prototype;
let methodNames = Object.getOwnPropertyNames (proto);
methodNames.map (k => f[k] = this[k]);
return f;
}
methodX () {return 3}
}
let myFunk = new Funk (x => x + 1);
let two = myFunk(1); // == 2
let three = myFunk.methodX(); // == 3
The above was tested on Node.js 8.
A shortcoming of the example above is it does not support methods inherited from the superclass-chain. To support that, simply replace "Object . getOwnPropertyNames(...)" with something that returns also the names of inherited methods. How to do that I believe is explained in some other question-answer on Stack Overflow :-). BTW. It would be nice if ES7 added a method to produce inherited methods' names as well ;-).
If you need to support inherited methods one possibility is adding a static method to the above class which returns all inherited and local method names. Then call that from the constructor. If you then extend that class Funk, you get that static method inherited along as well.
Having read this article and all the answers here, I finally found a satisfying answer in an older thread.
Here's an example:
class Hey {
constructor() {
function hey() {
return "hey";
}
this.value = "yo";
Object.assign(hey, this);
Object.setPrototypeOf(hey, Object.getPrototypeOf(this));
return hey;
}
yo() {
return this.value;
}
}
const hey = new Hey();
console.log(hey()); // it's callable 👍
console.log(hey.yo()); // methods are correctly bound to `this` 👍
console.log(hey instanceof Hey); // it type-checks 👍
Inheritance works too:
class HeyHey extends Hey {
constructor() {
super();
}
yoyo() {
return this.value + "!";
}
}
const lol = new HeyHey();
console.log(lol()); // it's callable 👍
console.log(lol.yo()); // inherited methods are correctly bound to `this` 👍
console.log(lol.yoyo()); // new methods are correctly bound to `this` as well 👍
console.log(lol instanceof Hey); // it type-checks for the super class 👍
console.log(lol instanceof HeyHey); // it type-checks for the derived class 👍
You can run the example here to see for yourself.
This approach:
correctly binds methods to this
is type-safe (can be type-checked using instanceof)
correctly supports inheritance (correctly binds and type-checks derived classes)
doesn't rely on any features newer than class - getPrototypeOf and setPrototypeOf were widely available some years before class
doesn't rely on the Function constructor (avoids parsing source code at run-time)
doesn't rely on Proxy (which isn't great for performance)
All in all, this approach is definitely simpler and easier to implement, and it should perform better as well.
(In theory - please feel free to benchmark this and post your results.)
Came up with a solution that works without using Object.setPrototypeOf since MDN has big red warning signs around that. Can run the example JSFiddle here. One limitation I can't figure out is how to get access to the this context at call time of the produced function within the arbitrary execute.
class ExtendedFunction extends Function {
// Arbitrary private properties
#foo
#baz() { return this.#foo + 'qux' }
// The thing that happens when you call your extended function
// context is optional if you want access to the `this`
// provides to your extended function at call time
#execute() {
// Arbitrary code that can call anything in closure here
return this.#baz()
}
constructor(a) {
// Set `this` to simple wrapper function
// that takes another function and returns its value
// Use super we get an instance of Function and ExtendedFucntion
super('execute', 'return execute()')
this.#foo = a
// Bind our arbitrary function to the current `this`
// allowing it to access private properties even when passed around
const boundExecute = this.#execute.bind(this)
// Bind the simple wrapper and the boundExecute together and return that
// When called our extended function will do whatever is in #execute
var self = this.bind(null, boundExecute)
return self
}
}
const a = new ExtendedFunction(256)
console.log(a instanceof Function) // true
console.log(a instanceof ExtendedFunction) // true
console.log(a()) // 256qux
A little late but let me leave this here.
Recently I had to discover a way to subclass Function in order to turn normal functions into Threadable / Promisified functions without messing with the Function.prototype. I think this particular necessity forms a very reasonable basis to this question on how and why one can use class abstraction to extend Function.
So the idea is, we create a Threadable class of which the member functions are threadable. By this I mean, any normal function can easily be made Threadable and when spawned runs on a seperate thread and gives us a promise to be resolved or rejected depending on the outcome of the worker operation. However you should still be able to invoke it syncronously if need be.
class Threadable extends Function {
// just use super() to wrap the given f function with a transparent function layer
constructor(f){
super("...as",`return ${f.toString()}.apply(this,as)`);
}
// spawn is the only method of the Threadable class.
// Returns a promise and runs callee function on a separate thread.
spawn(...as){
var code = `self.onmessage = m => self.postMessage((${this.toString()}).apply(self,m.data));`,
blob = new Blob([code], {type: "text/javascript"}),
wrkr = new Worker(window.URL.createObjectURL(blob));
return new Promise( (v,x) => ( wrkr.onmessage = m => (v(m.data), wrkr.terminate())
, wrkr.onerror = e => (x(e.message), wrkr.terminate())
, wrkr.postMessage(as)
)
);
}
}
function add(...ns) {
return ns.reduce((a,b) => a+b);
}
var addT = new Threadable(add);
addT.spawn(1,2,3,4)
.then(m => console.log(`Promisified thread returned ${m}`));
console.log(`Synchronous invocation of addT returned ${addT(1,2,3,4,5)}`);
Related
Lets say there are functions
function a(someparams){
console.log('a called')
}
function b(){
console.log('b called')
}
...
const c (someParam) => { console.log('c called')}
I want to extend default function prototype something like
Function.prototype.onCall = (args) => {console.log('Proxy fn called!',args)}
in a very begining of a page code, so every existing and new functions, upon call, will log 'Proxy fn called!'.
There are solutions to map window.functions - but they only work for existing functions, and I want to extend prototype to let it execute my piece of code.
The goal is to automatically check if args are valid. No I don't want typescript or flow, thanks for suggestion.
Is this possible? where to look at?
I found
(function() {
var call = Function.prototype.call;
Function.prototype.call = function() {
console.log(this, arguments); // Here you can do whatever actions you want
return call.apply(this, arguments);
};
}());
to be the closest to what I want so far, but these aren't called when calling a function normally, e.g. someFunction();, without explicit .call or .apply.
I have found maybe decorators is a way to go? the official doc said they are still not a standard https://github.com/tc39/proposal-decorators but there is a babel plugin https://babeljs.io/docs/en/babel-plugin-proposal-decorators is it possible that it would do the job or am I looking into wrong direction?
Proposal
What the OP is looking for is best described with method modification. There are specialized modifiers like around, before, after, afterThrowing and afterFinally.
In case of a search for modifier implementations one should be aware that such a modifier has to support a thisArg parameter in order to create a modified function which operates upon the correct this context (hence a method).
Answer
There is no single point where one could implement the interception of any function's invocation, be it existing functions or the ones yet to come (e.g. functions/methods generated while an application is running).
Regardless of the possible approaches like a Proxy's apply or construct method's or decorators (as proposed by another answer) or the just mentioned method modifiers (which are specialized abstractions for otherwise more complex manual wrapping tasks), one always has to know and explicitly refer to the to be proxyfied / decorated / modified functions and methods.
Example code which implements and uses Function.prototype.around ...
// 1st example ... wrapping **around** a simple function
function consumeAnyParameter(...params) {
console.log('inside `consumeAnyParameter` ... params ...', params);
}
function interceptor(originalFunction, interceptorReference, ...params) {
// intercept.
console.log('inside `interceptor` ... ', {
params,
originalFunction,
interceptorReference,
});
// proceed.
originalFunction(...params);
}
// reassignment of ... a modified version of itself.
consumeAnyParameter = consumeAnyParameter.around(interceptor);
// invoke modified version.
consumeAnyParameter('foo', 'bar', 'baz');
// 2nd example ... wrapping **around** a type's method.
const type = {
foo: 'foo',
bar: 'bar',
whoAmI: function () {
console.log('Who am I? I\'m `this` ...', this);
}
}
type.whoAmI();
type.whoAmI = type
.whoAmI
.around(function (proceed, interceptor, ...params) {
console.log('interceptor\'s `this` context ...', this);
console.log('interceptor\'s `params` ...', params);
// proceed.apply(this, params);
proceed.call(this);
}, type); // for method modification do pass the context/target.
type.whoAmI();
.as-console-wrapper { min-height: 100%!important; top: 0; }
<script>
// poor man's module.
(function (Function) {
// module scope.
function getSanitizedTarget(value) {
return value ?? null;
}
function isFunction(value) {
return (
'function' === typeof value &&
'function' === typeof value.call &&
'function' === typeof value.apply
);
}
// modifier implementation.
function around/*Modifier*/(handler, target) {
target = getSanitizedTarget(target);
const proceed = this;
return (
isFunction(handler) &&
isFunction(proceed) &&
function aroundType(...argumentArray) {
// the target/context of the initial modifier/modification time
// still can be overruled by a handler's apply/call time context.
const context = getSanitizedTarget(this) ?? target;
return handler.call(
context,
proceed,
handler,
argumentArray,
);
}
) || proceed;
}
// modifier assignment.
Object.defineProperty(Function.prototype, 'around', {
configurable: true,
writable: true,
value: around/*Modifier*/,
});
}(Function));
</script>
I get tired of writing code like this:
class Something {
constructor() {
this.method = this.method.bind(this);
this.anotherOne = this.anotherOne.bind(this);
// ...
}
}
It's time consuming and it's easy to forget to bind a method. I aware of the class fields proposal, but it's still Stage 3 and seems to come with some issues.
My current solution (based on this answer) looks like this:
class Something {
constructor() {
// Get all defined class methods
const methods = Object.getOwnPropertyNames(Object.getPrototypeOf(this));
// Bind all methods
methods
.filter(method => (method !== 'constructor'))
.forEach((method) => { this[method] = this[method].bind(this); });
}
}
This seems to work, but I'm wondering if there is a better way, or if this method has issues that I'm not aware of.
Update: Why Do This?
The problem I have run into is that if I don't bind my class functions in the constructor, I have to remember to call them "properly" later. For example:
const classInstance = new Something();
// This fails for a non-obvious reason
someAction()
.then(classInstance.method);
// This works of course but looks like we created a useless function if you don't know better
someAction()
.then(result => classInstance.method(result));
Use fat arrow function in ES6 (generally called as arrow function)
anotherOne = ()=> {
...
}
Call like this onClick={this.anotherOne}; no need to bind in constuctor
From the ECMA spec
Any reference to arguments, super, this, or new.target within an
ArrowFunction must resolve to a binding in a lexically enclosing
environment. Typically this will be the Function Environment of an
immediately enclosing function.
It seems a bit late to answer this question but there is no accepted answer so I will try my best for people come here after me.
To automatically bind this for all methods, you can use "arrow" function:
class Something {
constructor() {
// Don't need to bind `this`
}
doSomething = () => {
console.log(this); // `this` will be pointed to the instance
}
}
const s = new Something();
s.doSomething(); // => `this` is pointed to `s`
Note: just make sure the classes extending this class Something will not use doSomething method in its constructor (eg: super.doSomething()), otherwise you will get an error.
To answer the updated question: if you don't manually bind this using .call() or .apply(), the value of this depends on the way that method is called
For example:
class Something {
constructor() {
// didn't bind `this` here
}
doSomething() {
console.log(this);
}
}
const s = new Something();
const funcA = s.doSomething;
const object = {
funcB: s.doSomething,
};
// these ways of calling `.doSomething()` result in different values of `this`:
funcA(); // => `this` is pointed to the global variable (`window` in browser environment)
window.funcA(); // => same as `funcA()`
s.doSomething(); // => `this` is pointed to `s`
object.funcB(); // =? `this` is pointed to `object`
Beside that, the implementation of .then() method would be similar like this:
class Promise {
// ...
then(callback) {
// code...
callback(); // notice how the `callback` is called - not as a method of an object
// code...
}
}
With your code example, the way you pass the callback into .then() method will affect the value of this inside the callback:
const classInstance = new Something();
// `this` inside `classInstance.method` is pointed to `this` inside the
// `.then` method, not the `classInstance`, as `classInstance.method()`
// will be called as `callback()`
someAction()
.then(classInstance.method);
// `this` inside `classInstance.method` is pointed to `classInstance`,
// as the way the anonymous "arrow" function is called does not affect the way
// `classInstance.method` is called, so `this`'s value is controlled by the way
// you call it inside the callback (anonymous "arrow" function) of `.then()`
// method.
someAction()
.then(result => classInstance.method(result));
You can also use auto-bind like this
From usage example:
const autoBind = require('auto-bind');
class Unicorn {
constructor(name) {
this.name = name;
autoBind(this);
}
message() {
return `${this.name} is awesome!`;
}
}
const unicorn = new Unicorn('Rainbow');
// Grab the method off the class instance
const message = unicorn.message;
// Still bound to the class instance
message();
//=> 'Rainbow is awesome!'
// Without `autoBind(this)`, the above would have resulted in
message();
//=> Error: Cannot read property 'name' of undefined
You can use an ES6 arrow function:
method = () => {
//Do stuff
}
As stated in the docs:
An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords.
Class fields can be used to create functions automatically bound to the current instance.
class X {
fn = () => console.log(this.constructor.name)
}
const x = new X;
x.fn(); // regular call
const fn = x.fn;
fn(); // this is preserved
const fn2 = x.fn.bind(null);
fn2(); // cannot rebind this
In Python, you can implement __call__() for a class such that calling an instance of the class itself executes the __call__() method.
class Example:
def __call__(self):
print("the __call__ method")
e = Example()
e() # "the __call__ method"
Do JavaScript classes have an equivalent method?
Edit
A summary answer incorporating the discussion here:
Python and JavaScript objects are not similar enough for a true equivalent (prototype vs. class based, self, vs. this)
The API can be achieved however using proxy or modifying the prototype – and maybe using bind?
One should generally not do this: it is too far removed from the JS's structure and from the normal use of of JavaScript, potentially creating confusion among other JS devs, your future-self, and could result in idiosyncratic side-effects.
I basically agree with #CertainPerformace that this isn't really something you would do in normal JS code. Having said that, proxies offer a lot of possibilities and you can create something that is surprisingly close to (on the surface) to Python's __call__().
For example:
class F extends Function{
constructor(someID, arr, n){
super()
this.id = someID
this.arr = arr
this.n = n
return new Proxy(this, {
apply(target, thisArg, argumentsList) {
return target.__call__(...argumentsList);
}
})
}
__call__(a){ // simple mult functions
return a * this.n
}
*[Symbol.iterator](){ // make it iterable for demo purposes
yield *this.arr.map(this) // call itself in a map!
}
}
let f = new F("FrankenFunction", [1, 2, 3, 4], 5)
// access instance variable
console.log("id:", f.id)
// call it
console.log("calling with 100: ", f(100))
// use the iterator
// get multiples of calling this on arr
console.log([...f])
// change the __call__ function to power instead
F.prototype.__call__ = function(a){
return a ** this.n
}
// change n to get squares:
f.n = 2
// call it again with new __call__
console.log("calling with 10:", f(10)) // 10**2
console.log([...f]) // or iterate
I really not sure if any of this is a good idea, but it's an interesting experiment.
The only way to do this would be for the constructor to explicitly return a function, which can be called. (In Javascript, if you don't explicitly return inside a constructor, the newly created instance gets returned - but such an instance will be a plain object, not a function.)
class Example {
constructor() {
return function() {
console.log('function running');
}
}
}
const e = new Example();
e();
But this would be really weird to do, and would not allow you to reference any of the properties on the prototype, or anything like that. Better to avoid it, or to make a plain function that returns a function:
const example = () => () => console.log('function running');
const e = example();
e();
You can get this done, but in a rather weird way.
There isn't anything like __call__(), __add__() or __sub__() in JavaScript - JavaScript does not support operator overloading.
However if you really want to make objects callable, you can do it by giving a function a different prototype:
function createCallableObject(cls, fn) {
// wrap the original function to avoid modifying it
const wrapper = (...args) => fn(...args)
// set the prototype of the wrapped function so we can call class methods
Object.setPrototypeOf(wrapper, cls.prototype)
return wrapper
}
class Example {
method() { console.log('This is an instance of class Example') }
}
function example() { console.log('This is a function') }
const obj = createCallableObject(Example, example)
obj() // 'This is a function'
obj.method() // 'This is an instance of class Example'
console.log(obj.constructor) // 'class Example { ... }'
I am creating an AJAX API for a web service and I want to be able to call jQuery-like accessors.
jQuery seems to be able to execute 'jQuery' as a function, but also use it to directly access the object that is the result of the function EG:
jQuery();
jQuery.each({});
This is the trick that I can't seem to pull off:
myAPI('foo'); //output: 'foo'
myAPI('foo').changeBar(); //output: 'foo' 1
myAPI.changeBar(); //Error: not a function
I have seen the answers to similar questions, which are helpful, but don't really answer my question.
#8734115 - Really interesting, but you can't access the methods that were set by f.prototype.
#2953314 - Uses Multiple operations to create object instead of a single function.
here is my code:
(function(window) {
var h = function(foo) {
// The h object is actually just the init constructor 'enhanced'
return new h.fn.init(foo);
};
/**
* Methods defined at protoype.
*/
h.fn = h.prototype = {
constructor: h,
init: function(foo) {
console.log(foo);
return this;
},
splice : function () {},
length : 0,
bar : 0,
changeBar : function() {
this.bar++;
return this.bar;
}
};
h.fn.init.prototype = h.fn;
//Publish
window.myAPI =h;
}( window));
I'm sure I'm missing something simple :(
What jQuery is doing there is using jQuery as both a function and as a pseudo-namespace. That is, you can call jQuery: var divs = jQuery("div"); and you can use properties on it, e.g.: jQuery.each(...);.
This is possible because in JavaScript, functions are first-class objects, and so you can add arbitrary properties to them:
function foo() {
alert("Foo!");
}
foo.bar = function() {
alert("Bar!");
};
foo(); // "Foo!"
foo.bar(); // "Bar!"
That's literally all there is to it.
Within the call to bar, this will be the foo function (because this is determined entirely by how a function is called, not where it's defined). jQuery doesn't use this to refer to itself (usually it uses this to refer to DOM elements, sometimes to other things like array elements; when referring to itself, since it's a single thing, it just uses jQuery).
Now, you might want to ensure that your functions have proper names (whereas the function I assigned to bar above is anonymous — the property has a name, but the function does not). In that case, you might get into the module pattern:
var foo = (function() {
function foo() {
alert("Foo!");
}
function foo_bar() {
alert("Bar!");
}
foo.bar = foo_bar;
return foo;
})();
foo(); // "Foo!"
foo.bar(); // "Bar!"
That pattern also has the advantage that you can have private data and functions held within the scoping function (the big anonymous function that wraps everything else) that only your code can use.
var foo = (function() {
function foo() {
reallyPrivate("Foo!");
}
function foo_bar() {
reallyPrivate("Bar!");
}
function reallyPrivate(msg) {
alert(msg);
}
foo.bar = foo_bar;
return foo;
})();
foo(); // "Foo!"
foo.bar(); // "Bar!"
reallyPrivate("Hi"); // Error, `reallyPrivate` is undefined outside of the scoping function
In your code, you're assigning things to the prototype property of the function. That only comes into play when the function is called as a constructor function (e.g., via new). When you do that, the object created by new receives the function's prototype property as its underlying prototype. But that's a completely different thing, unrelated to what jQuery does where it's both a function and a pseudo-namespace.
You do not need any of that weirdness, to use stuff like $.each
you just attach functions to the function object instead
of the prototype object:
function Constructor() {
if (!(this instanceof Constructor)) {
return new Constructor();
}
}
Constructor.prototype = {
each: function() {
return "instance method";
}
};
Constructor.each = function() {
return "static method";
};
var a = Constructor();
a.each(); //"instance method"
Constructor.each(); //"static method"
I just read a few threads on the discussion of singleton design in javascript. I'm 100% new to the Design Pattern stuff but as I see since a Singleton by definition won't have the need to be instantiated, conceptually if it's not to be instantiated, in my opinion it doesn't have to be treated like conventional objects which are created from a blueprint(classes). So my wonder is why not just think of a singleton just as something statically available that is wrapped in some sort of scope and that should be all.
From the threads I saw, most of them make a singleton though traditional javascript
new function(){}
followed by making a pseudo constructor.
Well I just think an object literal is enough enough:
var singleton = {
dothis: function(){},
dothat: function(){}
}
right? Or anybody got better insights?
[update] : Again my point is why don't people just use a simpler way to make singletons in javascript as I showed in the second snippet, if there's an absolute reason please tell me. I'm usually afraid of this kind of situation that I simplify things to much :D
I agree with you, the simplest way is to use a object literal, but if you want private members, you could implement taking advantage of closures:
var myInstance = (function() {
var privateVar;
function privateMethod () {
// ...
}
return { // public interface
publicMethod1: function () {
// private members can be accessed here
},
publicMethod2: function () {
// ...
}
};
})();
About the new function(){} construct, it will simply use an anonymous function as a constructor function, the context inside that function will be a new object that will be returned.
Edit: In response to the #J5's comment, that is simple to do, actually I think that this can be a nice example for using a Lazy Function Definition pattern:
function singleton() {
var instance = (function() {
var privateVar;
function privateMethod () {
// ...
}
return { // public interface
publicMethod1: function () {
// private members can be accessed here
},
publicMethod2: function () {
// ...
}
};
})();
singleton = function () { // re-define the function for subsequent calls
return instance;
};
return singleton(); // call the new function
}
When the function is called the first time, I make the object instance, and reassign singleton to a new function which has that object instance in it's closure.
Before the end of the first time call I execute the re-defined singleton function that will return the created instance.
Following calls to the singleton function will simply return the instance that is stored in it's closure, because the new function is the one that will be executed.
You can prove that by comparing the object returned:
singleton() == singleton(); // true
The == operator for objects will return true only if the object reference of both operands is the same, it will return false even if the objects are identical but they are two different instances:
({}) == ({}); // false
new Object() == new Object(); // false
I have used the second version (var singleton = {};) for everything from Firefox extensions to websites, and it works really well. One good idea is to not define things inside the curly brackets, but outside it using the name of the object, like so:
var singleton = {};
singleton.dothis = function(){
};
singleton.someVariable = 5;
The ES5 spec lets us use Object.create():
var SingletonClass = (function() {
var instance;
function SingletonClass() {
if (instance == null) {
instance = Object.create(SingletonClass.prototype);
}
return instance;
}
return {
getInstance: function() {
return new SingletonClass();
}
};
})();
var x = SingletonClass.getInstance();
var y = SingletonClass.getInstance();
var z = new x.constructor();
This is nice, since we don't have to worry about our constructor leaking, we still always end up with the same instance.
This structure also has the advantage that our Singleton doesn't construct itself until it is required. Additionally, using the closure as we do here prevents external code from using our "instance" variable, accidentally or otherwise. We can build more private variables in the same place and we can define anything we care to export publically on our class prototype.
The singleton pattern is implemented by creating a class with a method that creates a new instance of the class if one does not exist. If an instance already exists, it simply returns a reference to that object. 1
(function (global) {
var singleton;
function Singleton () {
// singleton does have a constructor that should only be used once
this.foo = "bar";
delete Singleton; // disappear the constructor if you want
}
global.singleton = function () {
return singleton || (singleton = new Singleton());
};
})(window);
var s = singleton();
console.log(s.foo);
var y = singleton();
y.foo = "foo";
console.log(s.foo);
You don't just declare the singleton as an object because that instantiates it, it doesn't declare it. It also doesn't provide a mechanism for code that doesn't know about a previous reference to the singleton to retrieve it. The singleton is not the object/class that is returned by the singleton, it's a structure. This is similar to how closured variables are not closures, the function scope providing the closure is the closure.
I am just posting this answer for people who are looking for a reliable source.
according to patterns.dev by Lydia Hallie, Addy Osmani
Singletons are actually considered an anti-pattern, and can (or.. should) be avoided in JavaScript.
In many programming languages, such as Java or C++, it's not possible to directly create objects the way we can in JavaScript. In those object-oriented programming languages, we need to create a class, which creates an object. That created object has the value of the instance of the class, just like the value of instance in the JavaScript example.
Since we can directly create objects in JavaScript, we can simply use
a regular object to achieve the exact same result.
I've wondered about this too, but just defining an object with functions in it seems reasonable to me. No sense creating a constructor that nobody's ever supposed to call, to create an object with no prototype, when you can just define the object directly.
On the other hand, if you want your singleton to be an instance of some existing "class" -- that is, you want it to have some other object as its prototype -- then you do need to use a constructor function, so that you can set its prototype property before calling it.
The latter code box shows what I've seen JS devs call their version of OO design in Javascript.
Singetons are meant to be singular objects that can't be constructed (except, I suppose, in the initial definition. You have one, global instance of a singleton.
The point of using the "pseudo constructor" is that it creates a new variable scope. You can declare local variables inside the function that are available inside any nested functions but not from the global scope.
There are actually two ways of doing it. You can call the function with new like in your example, or just call the function directly. There are slight differences in how you would write the code, but they are essentially equivalent.
Your second example could be written like this:
var singleton = new function () {
var privateVariable = 42; // This can be accessed by dothis and dothat
this.dothis = function () {
return privateVariable;
};
this.dothat = function () {};
}; // Parentheses are allowed, but not necessary unless you are passing parameters
or
var singleton = (function () {
var privateVariable = 42; // This can be accessed by dothis and dothat
return {
dothis: function () {
return privateVariable;
},
dothat: function () {}
};
})(); // Parentheses are required here since we are calling the function
You could also pass arguments to either function (you would need to add parentheses to the first example).
Crockford (seems to) agree that the object literal is all you need for a singleton in JavaScript:
http://webcache.googleusercontent.com/search?q=cache:-j5RwC92YU8J:www.crockford.com/codecamp/The%2520Good%2520Parts%2520ppt/5%2520functional.ppt+singleton+site:www.crockford.com&cd=1&hl=en&ct=clnk
How about this:
function Singleton() {
// ---------------
// Singleton part.
// ---------------
var _className = null;
var _globalScope = null;
if ( !(this instanceof arguments.callee) ) {
throw new Error("Constructor called as a function.");
}
if ( !(_className = arguments.callee.name) ) {
throw new Error("Unable to determine class name.")
}
_globalScope = (function(){return this;}).call(null);
if ( !_globalScope.singletons ) {
_globalScope.singletons = [];
}
if ( _globalScope.singletons[_className] ) {
return _globalScope.singletons[_className];
} else {
_globalScope.singletons[_className] = this;
}
// ------------
// Normal part.
// ------------
var _x = null;
this.setx = function(val) {
_x = val;
}; // setx()
this.getx = function() {
return _x;
}; // getx()
function _init() {
_x = 0; // Whatever initialisation here.
} // _init()
_init();
} // Singleton()
var p = new Singleton;
var q = new Singleton;
p.setx(15);
q.getx(); // returns 15
I stole this from CMS / CMS' answer, and changed it so it can be invoked as:
MySingleton.getInstance().publicMethod1();
With the slight alternation:
var MySingleton = { // These two lines
getInstance: function() { // These two lines
var instance = (function() {
var privateVar;
function privateMethod () {
// ...
console.log( "b" );
}
return { // public interface
publicMethod1: function () {
// private members can be accessed here
console.log( "a" );
},
publicMethod2: function () {
// ...
privateMethod();
}
};
})();
singleton = function () { // re-define the function for subsequent calls
return instance;
};
return singleton(); // call the new function
}
}