this.bajar() is not a function

Question

I have the following code:

subir() {
    this.y -= 5;
    if(this.y <= 2) {
        clearInterval(this.salto);
        this.salto = setInterval("this.bajar()", this.vel);
    }
}
bajar() {
    this.y += 5;
    if(this.y >= 15){
        this.saltar = true;
        clearInterval(this.salto);
    }
}

These functions are inside a class named Dinosaurio. When I call subir() it works fine, and as you saw in the code, it should automatically call the bajar() function after a few seconds. But bajar() doesn't work, and instead I got in the console this.bajar() is not a function

What is causing this bug?

I forgot to tell you, I call the "subir()" function from a "setinterval" that is stored inside "this.salto" — Giovanni El Zelah, Nov 06 '16 at 01:52
Take the qutoes away from `this.bajar()` and lose the parenthesis. The syntax should be `this.bajar`. But secondly, the `this` object reference doesn't work like you think it does. You are not pointing to the correct object. Just call `bajar` instead. — Scott Marcus, Nov 06 '16 at 01:52
@ScottMarcus That won't work either -- it needs to be `this.bajar.bind(this)` — River Tam, Nov 06 '16 at 01:53
You posted half the code. Always post a runnable example that reproduces the problem — Ruan Mendes, Nov 06 '16 at 03:09

Aruna · Accepted Answer · 2016-11-06T02:09:13.873

2

You have to use this keyword with bind() in setInterval, otherwise this will be treated as window object. Also remove the quotes.

Try like this,

this.salto = setInterval(this.bajar.bind(this), this.vel);

Note: When you use this, it refers to the context it's being used. So if you use inside the object, it will refer the same object. setInterval is shorthand if window.setInterval and when the callback passed to the setInterval is called, the context is changed to window object. So this refers to the window object. Hence, we have to use the bond method by passing this to bind the context to the current object. So bind will return new method with the same context.

edited Nov 06 '16 at 02:09

answered Nov 06 '16 at 01:53

Aruna

11,959
3
28
42

Typo corrected. – Aruna Nov 06 '16 at 01:54
1

I think you need to take out the quotes. – River Tam Nov 06 '16 at 01:54
Yes are correct and updated – Aruna Nov 06 '16 at 01:55
This is a solution without a good explanation of the problem, it doesn't help the user understand how `this` is bound in JavaScript – Ruan Mendes Nov 06 '16 at 02:03
When you use this, it refers to the context it's being used. So if you use inside the object, it will refer the same object. setInterval is shorthand if window.setInterval and when the callback passed to the setInterval is called, the context is changed to window object. So this refers to the window object. Hence, we have to use the bond method by passing this to bind the context to the current object. So bind will return new method with the same context. – Aruna Nov 06 '16 at 02:08
Thanks for your answer, I just try with "bind" it didn't work, I got the same error: "this.bajar" is not a function – Giovanni El Zelah Nov 06 '16 at 02:09
Can you place the full code, I mean with the class and other required piece. I will fix it. – Aruna Nov 06 '16 at 02:10
@giovanni look at the answer I posted a link to, it explains all details of how `this` works – Ruan Mendes Nov 06 '16 at 03:08

this.bajar() is not a function

1 Answers1