title: How to use `this` in a function called by an ES6 arrow function?
body: <p>I understand (I think) that arrow functions in ES6 use <a href="http://es6-features.org/#Lexicalthis" rel="nofollow">Lexical this</a>, but I'm not sure why a function called by a fat arrow function would have <code>this</code> set as undefined.</p>
  
  <p>What do I have to do to be able to call <code>this.setResult</code> in <code>handleAuthResult</code>? I do not want to use the old <code>function () {}.bind(this)</code> if I don't need to.</p>
  
  <pre><code>"use strict";
  
  class Example {
      constructor() {
          this.checkAuth();
      }
  
      checkAuth() {
          document.write("Checking auth now. ");
          var iid = setInterval(() = &gt; {
              if (true) { // Have to do some dumb check here
                  clearInterval(iid);
                  this.authenticate(this.handleAuthResult)
              }
          }, 500);
      }
  
      authenticate(callback) {
          callback({
              value: true
          });
      }
  
      handleAuthResult(result) {
          document.write(`The result is ${result.value}.`);
          this.setResult(result, this.loadThePage)
          // ^ `this` is undefined here. How can I ever set the result?
      }
  
      // Another asynchronous thing
      setResult(result, callback) {
          callback();
      }
  
      loadThePage() {
          document.write("The code never gets here, but the page should load now. ");
      }
  };
  var example = new Example();
  </code></pre>
  
  <p>Thanks! <a href="https://jsfiddle.net/vujev4dj/" rel="nofollow">https://jsfiddle.net/vujev4dj/</a></p>
  
  <p><strong>Edit:</strong> in my defense of this being marked as duplicate, the behaviour I expected <em>does</em> work in the following fiddle, which is why I expected to not have to use the <code>bind</code> function on <code>this.handleAuthResult</code> in ES6: <a href="https://jsfiddle.net/m9e7j4ds/" rel="nofollow">https://jsfiddle.net/m9e7j4ds/</a></p>