title: How to prevent "this" from being overwritten?
body: <p>So I am working with the ES6 class stuff, which I've not had a chance to mess around with before, and event handlers, and I'm encountering an issue with the value of my <code>this</code>.</p>
  
  <p>Javascript:</p>
  
  <pre class="lang-js prettyprint-override"><code>class Chat {
      constructor() {
          /*code*/
      }
  
      handleOnKeyDown() {
          console.log("A key was pressed somewhere on the page!")
          console.log(this)
      }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>let chat = new Chat()
  
  chat.handleOnKeyDown() //this === [Chat Object]
  
  document.onkeydown = chat.handleOnKeyDown //this === #document
  </code></pre>
  
  <p>How is my <code>this</code> being overwritten, and how can I prevent it from doing so? I don't particularly need the this from the event handler, since it's just literally the entire document, and isn't giving me any extra context. </p>