Difference between using variable self vs this

Question

I have been struggling with the use of these "this" with the .bind() method and the use of the variable "self = this". In getting two different results with those, so I'm missing one concept. The case is like follow:

// Defining a callback class to use after retrieving data
var Callback = (function(){
    // UPDATED!! Local vbles
    var template_to_use, html_element, self;

    function Callback(){
        self = this,
        template_to_use = null,
        html_element = null;
    }

    var p = Callback.prototype;
    p.set_template = function(template_funct){
        self.template_to_use = template_funct;
    };

    p.set_html_element = function(html_element){
        self.html_element = html_element;
    };

    p.use_callback     = function(data){                                                              
        $(self.html_element).append(self.template_to_use(data));
    };

    return Callback;
})();

The usage of this function is like follow:

// Setup callback 1 to call after getting the data
var callback_1 = new Callback();
callback_1.set_template(use_templ_1);
callback_1.set_html_element("#list");

// Get list data
api_list.get_data(callback_1.use_callback);


// Setup callback 2 to call after getting more data
var callback_2 = new Callback();
callback_2.set_template(use_templ_2);
callback_2.set_html_element("#object");

// Get object data
api_object.get_data(callback_2.use_callback);

Two ajax calls are executed and once the get_data() function is done, they will call the callback functions that I passed to them. The issue I'm getting is that after executing those functions, the callback is always mentioning the html_element = "#object" with the corresponding template "use_templ_2".

If I use "this" and .bind function instead of the "self" vble, the results are the expected ones.

// Get object data
api_object.get_data(callback_2.use_callback.bind(callback_2));

What am I missing? It might be an error concept since even if I'm not new to js, I'm new understanding the language itself.

Answer 1

If you're asking about the difference between self and this, then self is used as a reference to the original this. That means even if the content of this is changing, then self still contains the previous.

Don't know if this is clear enough. If not take a look at What underlies this JavaScript idiom: var self = this? or Difference between self and this in javascript and when to use either of them.

Also try to avoid using self as a global variable, because it's used by browsers nowadays for something. Sorry I don't remember what for - if someone could edit this info it that would be awesome.