title: Difference between using variable self vs this
body: <p>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: </p>
  
  <pre><code>// 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;
  })();
  </code></pre>
  
  <p>The usage of this function is like follow:</p>
  
  <pre><code>// 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);
  </code></pre>
  
  <p>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".</p>
  
  <p>If I use "this" and .bind function instead of the "self" vble, the results are the expected ones.</p>
  
  <pre><code>// Get object data
  api_object.get_data(callback_2.use_callback.bind(callback_2));
  </code></pre>
  
  <p>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.</p>