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?](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) — James Thorpe, Jan 14 '16 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, Jan 14 '16 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, Jan 14 '16 at 12:11
Yes, of course. You can see something here: https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Trabajando_con_objectos || https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Object/prototype — Marcos Pérez Gude, Jan 14 '16 at 12:20

Lewis · Accepted Answer · 2016-01-14T13:42:08.287

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 '16 at 13:42

answered Jan 14 '16 at 11:55

Lewis

14,132
12
66
87

should I change something inside the `func1` implementation? – Luis González Jan 14 '16 at 12:02
1

@LuisGonzález no, you just need to bind it here. He did not explain it, that's the problem. – CoderPi Jan 14 '16 at 12:02
Thank you so much! Your answer fixed magically the bug. I didn't know about the `bind` function! – Luis González Jan 14 '16 at 12:06
2

@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 – CoderPi Jan 14 '16 at 12:11
yes I am having a look and I am thinking that this answer could be a duplicate – Luis González Jan 14 '16 at 12:12
@LuisGonzález You can check my answer for more details. – Lewis Jan 14 '16 at 13:44
I didn't know this JS sentence `() => this.func1()` thank you for this great answer – Luis González Jan 14 '16 at 13:56
@LuisGonzález Just make sure your targeted browsers support arrow functions. It's a quite new feature. – Lewis Jan 14 '16 at 13:59
@LuisGonzález yes that is only ECMA Script 2015, the latest version, not enabled in browsers by default yet. – CoderPi Jan 14 '16 at 14:48
@Tresdin nice! now you deserve my upvote ;) (maybe add a ES6 warning to arrow functions) – CoderPi Jan 14 '16 at 14:48
@Tresdin if `func1` would require a parameter, how could I pass it if I am binding it a context? what should I change in this code line `this.func1.bind(this)`? – Luis González Jan 18 '16 at 11:27
1

@LuisGonzález It's already described in the link. `this.func1.bind(this,arg1,arg2,...)` – Lewis Jan 18 '16 at 13:40
Thanks! I was reading it but it didn't works... after I noticed what was the problem – Luis González Jan 18 '16 at 13:42

Calling javascript class methods from another method inside the same class

1 Answers1