title: Is using var self = this a good way to sync between a class and events?
body: <p>Let's look at this simple code example (it's written in angularjs for the simplicity, but this happens all the times in JavaScript):</p>
  
  <pre><code>angular.module('app',[]).
  directive('myDir', function(){
      this.state = {a:1, b:2};
  
      return {
          link: function(scope, elem, attrs){
              elem.on('click', function(){
                  // "this" is not the class but the element
                  this.state.a++;       
                  this.state.b++;
                  console.log(this.state);
              });
          }
      }
  });
  </code></pre>
  
  <p>When the onclick callback's going to be invoked, the "this" will not be the directives function but the element itself.</p>
  
  <p>So we all know the trick here and we create a closure and use <code>var self = this</code> to complete the work.</p>
  
  <pre><code>angular.module('app',[]).
  directive('myDir', function(){
      // create a closure for the rescue
      var self = this;
      this.state = {a:1, b:2};
      return {
          link: function(scope, elem, attrs){
              elem.on('click', function(){
                  self.state.a++;       
                  self.state.b++;
                  console.log(self.state);
              });
          }
      }
  });
  </code></pre>
  
  <p>Ok - this works and I've done this so many times, but I'm asking myself if this is the best way to do something like this?<br/>
  This always looked like a bad design workaround to me.<br/>
  Is there a better way to sync between a class and user events?<br/></p>