Uncaught TypeError: this.function is not a function

Question

Hi this is my (shortcuted) example code:

export class SolarSystemInfo {

    constructor() {
        this.test();
    }

    // click on solar system
    clickSolarSystem() {
        $("body").on("click",".hex", function() {
            this.test();
        }); 
    }

    public test () {
        alert('test');
    }

}

My problem is, that in constructor is test function called right, but in clickSolarSystem function after calling this.test() I get: Uncaught TypeError: this.test is not a function
How I have to call test function in my function inner class?
Thanks

See also https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_binding_of_this — Ry-, Jun 19 '17 at 14:16
// click on solar system clickSolarSystem() { var self = this; $("body").on("click",".hex", function() { self.test(); }); } — Mailis Toompuu, Jun 17 '18 at 09:59

Nitzan Tomer · Accepted Answer · 2017-06-19T14:20:52.920

11

The context of this is lost when the callback function is being executed.
To solve that you can use an arrow function:

clickSolarSystem() {
    $("body").on("click",".hex", () => {
        this.test();
    }); 
}

Or you can use the bind method:

clickSolarSystem() {
    $("body").on("click",".hex", function() {
        this.test();
    }).bind(this); 
}

edited Jun 19 '17 at 14:20

answered Jun 19 '17 at 14:16

Nitzan Tomer

155,636
47
315
299

It would probably help to explain what `this` refers to in each context. – chrisbajorin Jun 19 '17 at 14:18
1

@cdbajorin updated the answer – Nitzan Tomer Jun 19 '17 at 14:21
Thanks for help: – LiH Jun 19 '17 at 14:45
arrow function () => it works for me – Kairat Koibagarov Oct 12 '21 at 05:59

Uncaught TypeError: this.function is not a function

1 Answers1