Calling javascript class methods from another method inside the same class

Question

I don't know how to deal properly with this case. I have a Javascript object like this:

var myClass = {

    init : function(){
        $("button").on("click" , this.func1);
    },

    func1: function(){

        // do stuffs

        this.func2();

    },

    func2: function(){

        // do stuffs
    }
}

myClass.init();

When I initialize my class for binding event there's no problem. In the init function, the value of this is the class itself, so I can call their methods without problem.

Take into account that when a button is clicked, I executed func1. I found the problem inside the function func1 because in this case the value of this is the button that was pressed, so when I try this.func2 I get Uncaught TypeError: this.func2 is not a function.

How I deal with this kind of problem? I'm sure that there is a standar way to solve this problem but I don't know it.

Thanks !!

Possible duplicate of How to access the correct `this` / context inside a callback? — James Thorpe
– James Thorpe, Commented Jan 14, 2016 at 11:53
You are writting literal objects (obj = { foo: 'bar' }). I recommend to you to make prototype normal objects (obj = function() { this.foo = function() { return "bar"; }; };) — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Jan 14, 2016 at 11:55
@MarcosPérezGude thank you su much for your advice! could you give me some link for deeping in what you say? please — Luis González
– Luis González, Commented Jan 14, 2016 at 12:11
Yes, of course. You can see something here: developer.mozilla.org/es/docs/Web/JavaScript/Guide/… || developer.mozilla.org/es/docs/Web/JavaScript/Referencia/… — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Jan 14, 2016 at 12:20

Lewis · Accepted Answer · 2016-01-14 13:42:08Z

4

From your example, this.func1 is actually bound to no context when it is executed. So its this keyword will be either fallbacked to window object on legacy mode or undefined on strict mode. In order to execute this.func1 in myClass context, you can use one of these methods:

Set this to myClass with Function.prototype.bind

$("button").on("click", this.func1.bind(this));

Wrap inside an anonymous function

var self = this;
$("button").on("click", function() {
  self.func1();
});

Wrap inside an arrow function

$("button").on("click", () => this.func1());

edited Jan 14, 2016 at 13:42

answered Jan 14, 2016 at 11:55

Lewis

15k14 gold badges70 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Luis González Over a year ago

should I change something inside the func1 implementation?

CoderPi Over a year ago

@LuisGonzález no, you just need to bind it here. He did not explain it, that's the problem.

Luis González Over a year ago

Thank you so much! Your answer fixed magically the bug. I didn't know about the bind function!

CoderPi Over a year ago

@LuisGonzález you might want to have a look at the first answer in the doublicate link. It has some nice additional Infromation about all that

Lewis Over a year ago

@LuisGonzález It's already described in the link. this.func1.bind(this,arg1,arg2,...)

|

Collectives™ on Stack Overflow

Calling javascript class methods from another method inside the same class

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related