title: Javascript - arrow functions this in event handler?
body: <p>I'm new to ES6, and can't quite get this to work:</p>
  
  <p><code>$(this)</code> returns undefined on click? </p>
  
  <pre><code>dom.videoLinks.click((e) =&gt; {
              e.preventDefault();
              console.log($(this));
              var self = $(this),
                  url = self.attr(configuration.attribute);
  
              eventHandlers.showVideo(url);
  
              // Deactivate any active video thumbs
              dom.videoLinks.filter('.video-selected').removeClass('video-selected');
  
              // Activate selected video thumb
              self.addClass('video-selected');
          });
  </code></pre>
  
  <p>However if I change it so not be an <em>arrow function</em> like so, it works as expected?:</p>
  
  <pre><code>dom.videoLinks.click(function(e) {
              e.preventDefault();
              console.log(this);
              console.log($(this));
              var self = e.this,
                  url = self.attr(configuration.attribute);
  
              eventHandlers.showVideo(url);
  
              // Deactivate any active video thumbs
              dom.videoLinks.filter('.video-selected').removeClass('video-selected');
  
              // Activate selected video thumb
              self.addClass('video-selected');
          });
  </code></pre>
  
  <p>So how would I go about it if I use an <em>arrow function</em> in the callback? </p>