Javascript - arrow functions this in event handler?
<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>