how does the javascript interpreter work in classes

Question

I have this js code , when it executes "user clicked" effectively gets printed but an error is thrown when trying to execute funA:

app.js:13 Uncaught TypeError: this.funA is not a function at HTMLBodyElement.handleclick (app.js:13:14)

I guess the interpreter hasn't read the funA function yet at the time of executing handleclick? What happens here and how could I solve this.

class UI {
    constructor() {
        this.body = document.querySelector("body")
        this.body.onclick = this.handleclick
    }

    funA() {
        console.log("called funA")
    }

    handleclick(e) {
        console.log("user clicked")
        this.funA()
    }
}


new UI()

https://stackoverflow.com/questions/38939569/javascript-bind-event (random pick from many) — Adriano Repetti, Jan 27 '22 at 15:59
`this` in the handler refers to the element the event was attached to, you've to bind the instance to `this` value. — Teemu, Jan 27 '22 at 16:00

score 0 · Answer 1 · answered Jan 27 '22 at 16:00

When you set the function like that, the body element has the context of this.

Save the context of this with the .bind function

class UI {
    constructor() {
        this.body = document.querySelector("body")
        this.body.onclick = this.handleclick.bind(this);
    }

    funA() {
        console.log("called funA")
    }

    handleclick(e) {
        console.log("user clicked")
        this.funA()
    }
}


new UI()

body { width: 100%; height: 100vh; }

<p>lorem ipsum</p>

how does the javascript interpreter work in classes

1 Answers1