How can I call a class function from inside an Object?

Question

I'm trying to call a class' function from inside an object stored in another function of the same class. I can't use this, as it refers to the object and not to the class. Directly calling the function by its name doesn't work either, as it throws a "not defined" error.

I have code equivalent to this:

class X extends Y {
    functionA() {
        console.log("Function called!");
    }
    functionB() {
        window.testObject = {
            objectFunction() {
                // I need to call functionA from inside here
            }
        }
    }
}

How can I call functionA from inside objectFunction?

All the solutions in https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback apply here as well. — Felix Kling, Oct 13 '17 at 15:23

score 3 · Accepted Answer · answered Oct 13 '17 at 11:59

3

You can simply set another variable (e.g., self) equal to this prior to this changing.

class X extends Y {
    functionA() {
        console.log("Function called!");
    }
    functionB() {
        let self = this;
        window.testObject = {
            objectFunction() {
                // I need to call functionA from inside here
                self.functionA();
            }
        }
    }
}

answered Oct 13 '17 at 11:59

Nick

16,066
3
16
32

1

Your answer is not wrong but please note that this is a *code smell*, i.e. a symptom of bad design. – Jared Smith Oct 13 '17 at 12:01
Works perfectly, and it's pretty obvious now that I know the answer. Thanks! I will mark as correct as soon as it lets me do so. – dieortin Oct 13 '17 at 12:02
@JaredSmith how could I do it better? I'm using Google Webfonts loader, and it requires an object which has among other things the callback methods that are called when the fonts are loaded (https://github.com/typekit/webfontloader) I'm doing all this inside a class, and need to render some text when the font finishes loading. – dieortin Oct 13 '17 at 12:05
1

@dieortin In this case a simple solution is to use an event listener, the google fonts webloader [emits a number of events](https://github.com/typekit/webfontloader#events) for that purpose. – Jared Smith Oct 13 '17 at 12:09
@JaredSmith but events are implemented as callback functions inside the object itself, so I would run into the same problem right? – dieortin Oct 13 '17 at 12:44
1

@dieortin what is the requirement that you do this inside of a method? Why are you *fighting* the language/API/control-flow model? (btw, that's the code smell). Furthermore if you really *have* to do it this way in the "my boss is an idiot who ordered me to do it this way but it's not worth arguing with him" sense of "have to" (and if that's the case I'm sorry) then search here on SO for "how to pass a method as a callback in javascript" and you'll find plenty of answers. – Jared Smith Oct 13 '17 at 12:56
@JaredSmith I'm using Phaser to create a browser game, and the game loop calls my preload() method (in which I load certain web font) and then my create() method (in which I add the text) By the time create() is called the font hasn't loaded yet, so I must change the font when it finishes loading. This is all inside a class that extends Phaser.State class. I could do it without using classes, but I was using this project as means to improve my understanding of ES6. – dieortin Oct 13 '17 at 15:29
@dieortin one does not enhance one's understanding of round pegs by pounding them into square holes. Reconsider your motivations. – Jared Smith Oct 13 '17 at 15:47

How can I call a class function from inside an Object?

1 Answers1