title: Why can't I access `this` within an arrow function?
body: <p>This code below should work as expected, and log <code>"meow"</code>, <a href="https://jsbin.com/zovamuyano/edit?html,js,console" rel="noreferrer">here an example</a>.</p>
  
  <pre><code>function Cat () {
    this.animalNoise = 'meow' 
  }
  
  Cat.prototype.sound = () =&gt; {
    console.log(this.animalNoise)
  }
  
  let cat = new Cat()
  cat.sound()
  </code></pre>
  
  <p>It doesn't work, this error appears <code>TypeError: Cannot read property 'animalNoise' of undefined</code> and when you convert the arrow function to an actual <code>function</code> declaration it works. It seems like with the arrow function, I no longer have access to <code>this</code>. What's going on here? </p>
  
  <p>To be clear, <strong>the above code does not work</strong> where the following does, and I'm very curious why.</p>
  
  <pre><code>function Cat () {
    this.animalNoise = 'meow' 
  }
  
  Cat.prototype.sound = function() {
    console.log(this.animalNoise)
  }
  
  let cat = new Cat()
  cat.sound()
  </code></pre>