Calling member function from event listener callback function in JavaScript class

Fifi
March 18, 2023
78 views
0 votes
2 Answers

I need to call a member function from the callback function in an event listener which is also in another member function. Here is a simplified example:

class C {

  finished() {
    console.log ('over');
  }
  
  timer() {
    console.log('started')
    setTimeout(function fct() {
        this.finished();
    },500);
  }
}


let c = new C();

c.timer();

I get the following result : Uncaught TypeError: this.finished is not a function". I understand that the callback function is no longer member of the class C.

Is there a way to call the finished() member function from the callback function?

Here is a JSFiddle

Answers

You need to bind this

class C {
    finished() {
        console.log('over');
    }

    timer() {
        console.log('started');
        setTimeout(function fct() {
            this.finished();
        }.bind(this), 500);
    }
}

let c = new C();
c.timer();

or just hand over the function

this.finished

which keeps the reference of this.

class C {
    finished() {
        console.log('over');
    }

    timer() {
        console.log('started');
        setTimeout(this.finished, 500);
    }
}

let c = new C();
c.timer();

- Mina
- March 18, 2023 at 10:43 am
- 0 votes
0
this inside the setTimeout callback will refer to window object not the C object, So you need to bind the setTimeout callback with the C object
class C { finished() { console.log ('over'); } timer() { console.log('started') setTimeout(function fct() { // ... some code. this.finished(); }.bind(this),500); } } let c = new C(); c.timer();
Or you can use the arrow function which will make this will refer to the this of the outer scope.
class C { finished() { console.log ('over'); } timer() { console.log('started') setTimeout(() => { this.finished(); },500); } } let c = new C(); c.timer();
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.