Javascript function assigned to object cannot access inherited method

Question

I'm no doubt doing something dumb here, but the following code results in an

error "this.getString is not a function."

This occurs because when unrelatedInstance calls stringGetter, "this" in showCombinedStrings() has the value of Unrelated....which actually seems fair enough, but how could this be set up so that it would work?

function BaseStringGetter() {
    this.getString = function () {
        return 'this is from BaseStringGetter';    
    }
}

function DerivedStringGetter() {
    this.showCombinedStrings = function () {
        console.log( 'this is from DerivedStringGetter and... ' + this.getString() );
    }
}
DerivedStringGetter.prototype = new BaseStringGetter();
var stringGetterInstance = new DerivedStringGetter();

function Unrelated() {};
var unrelatedInstance = new Unrelated();
unrelatedInstance.stringGetter = stringGetterInstance.showCombinedStrings;
unrelatedInstance.stringGetter();

S McCrohan · Accepted Answer · 2015-05-06 03:26:01Z

1

One option is this:

unrelatedInstance.stringGetter =
    stringGetterInstance.showCombinedStrings.bind(stringGetterInstance);
unrelatedInstance.stringGetter();

Here, you're using Function.prototype.bind() to make this inside of unrelatedInstance.stringGetter() always refer back to stringGetterInstance.

answered May 6, 2015 at 3:26

S McCrohan

6,7011 gold badge33 silver badges39 bronze badges

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

Comments

Arun P Johny · Accepted Answer · 2015-05-06 03:26:12Z

The problem is how you are calling unrelatedInstance.stringGetter();

Even though stringGetter refers to the showCombinedStrings function, this inside showCombinedStrings now refers to the unrelatedInstance instance which does not have the toString() property that is why the error.

Demo: Fiddle

Here the value of this is printed as Unrelated {stringGetter: function} which is not an DerivedStringGetter instance

One easy solution is to use .bind() to give a custom execution context to unrelatedInstance.stringGetter like

unrelatedInstance.stringGetter = stringGetterInstance.showCombinedStrings.bind(stringGetterInstance);

Demo: Fiddle

Now even if you call unrelatedInstance.stringGetter(), this inside showCombinedStrings will refer to the stringGetterInstance instance.

takteek · Accepted Answer · 2015-05-06 03:36:03Z

0

When you call a function on an object, this will refer to the object the function is invoked on even if the function was originally defined elsewhere.

When you call unrelatedInstance.stringGetter();, this inside the function will now refer to unrelatedInstance which doesn't have getString(). The MDN this reference page has more info.

You could do something like this to preserve the original context:

unrelatedInstance.stringGetter = function() {
    return stringGetterInstance.showCombinedStrings();
}

Edit: I left out bind that the other answers have now mentioned since it doesn't exist in IE8 but you'd be fine using that if you have a shim or don't care about old browsers.

edited May 6, 2015 at 3:36

answered May 6, 2015 at 3:22

takteek

7,1504 gold badges41 silver badges71 bronze badges

Collectives™ on Stack Overflow

Javascript function assigned to object cannot access inherited method

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related