Question

I´m littel confused with this reserve key and cases caused errors. Here a sample code where this causes errors.

var sample = {
    init: function() {
        this.sampleFunction0();
        this.sampleFunction1();
    },
    sampleFunction0 : function(){
        var something0, something1, something2;
        something0 = this.sampleFunction2(); // works, there is no ambiguity whit 'this'
        jQuery('#list li').click(function(){
            something1 = this.sampleFunction2(); // ambiguity: not works, but sample.sampleFunction2(); works
            something1 = sample.sampleFunction2(); // it´s works
            something2 = $(this).text(); // list item val
            console.log(something0) // something
            console.log(something1); // something : using sample.sampleFunction2();
            console.log(something2); // item val
        });
    },
    sampleFunction1 : function(){
        return 'someting';
    },
    sampleFunction2 : function(){
        return 'something';
    }
}

jQuery(document).ready(function(){
    sample.init();
});

I don´t know if is correct to use sample.sampleFunction2(); instead this.sampleFunction2();

Answer 1

From your question I think you probably know this, but: Within the event handler, this refers to the element on which you hooked the event, which is of course why this.sampleFunction2() doesn’t work. So this will be the li element that was clicked — which is frequently quite handy.

In your specific case, using sample rather than this is fine, because your sample object is a one-off, there won’t be more than one of it. So yes, just use sample.sampleFunction2(); instead of this.sampleFunction2();.

In cases where there may be more than one (things created via a constructor function, etc.), the typical thing to do in this case (no pun) is to define a local variable in your closure (your function you’re passing into click) can close over:

sampleFunction0 : function(){
    var something0, something1, something2, self = this; // <==== CHANGE
    something0 = this.sampleFunction2(); // works, there is no ambiguity whit 'this'
    jQuery('#list li').click(function(){
        something1 = self.sampleFunction2(); // <==== CHANGE
        something2 = $(this).text(); // list item val
    });
},

There are times when it’s useful to use jQuery’s proxy function, but not in this case, because A) you’re already defining a closure, and B) you’re using this for something else. proxy is useful when you’re trying to bind a function that you’ve defined elsewhere, and when you need this to have a specific value other than the one it would normally have.

More reading:

• You must remember this
• Mythical methods
• Closures are not complicated