CODEWITHSUNDEEP
javascriptjquery
kitimenpolku
kitimenpolku

Reputation: 2604

Difference between using variable self vs this

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.

Upvotes: 8

Views: 25208

Answers (2)

user1636522
user1636522

Reputation:

Be careful, self will always refer to the last instanciated object :

var c1 = new Callback();
var c2 = new Callback(); // overrides previous self

Then following line actually sets c2.html_element :

c1.set_html_element(html_element);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

That said, replacing this is completely useless in your case.

Upvotes: 3

Dropout
Dropout

Reputation: 13866

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.

Upvotes: 9

Related Questions