JavaScript prototypes: replace a function

Question

I want to decorate a function of a JavaScript "class" (prototype):

SomeClass = function() { this.someVar = 5; };

SomeClass.prototype = {
    foo: function(arg) { /* do something with this.someVar */ }
}

However, I cannot change the source of SomeClass nor am I able to influence the instance creation of SomeClass instances.

Therefore I thought about doing the following:

var oldFoo = SomeClass.prototype.foo;
SomeClass.prototype.foo = function(arg) {
    console.log("Yey, decorating!");
    oldFoo(arg);
};

This seems to work fine, however, due to function scoping oldFoo cannot access someVar anymore (the this object is now window). How to overcome this issue?

Benjamin Gruenbaum · Accepted Answer · 2014-08-27 10:29:46Z

2

You need to delegate it correctly. What's happening is that since you're calling oldFoo like a bare function the this value is set to undefined (or the global object in non-strict mode).

Apply the method with the arguments and set the this value explicitly:

oldFoo.apply(this, arguments); // use the same `this` and same arguments as called.

Note that in order to be really correct - you also need to return the result. So in total your code should look something like:

SomeClass.prototype.foo = function(arg) {
    console.log("Yey, decorating!");
    return oldFoo.apply(this, arguments); // alternatively capture the return value
};                                        // and process it and then return it

answered Aug 27, 2014 at 10:29

Benjamin Gruenbaum

278k90 gold badges524 silver badges524 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript prototypes: replace a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related