Why can't I access `this` within an arrow function?

Question

This code below should work as expected, and log "meow", here an example.

function Cat () {
  this.animalNoise = 'meow' 
}

Cat.prototype.sound = () => {
  console.log(this.animalNoise)
}

let cat = new Cat()
cat.sound()

It doesn't work, this error appears TypeError: Cannot read property 'animalNoise' of undefined and when you convert the arrow function to an actual function declaration it works. It seems like with the arrow function, I no longer have access to this. What's going on here?

To be clear, the above code does not work where the following does, and I'm very curious why.

function Cat () {
  this.animalNoise = 'meow' 
}

Cat.prototype.sound = function() {
  console.log(this.animalNoise)
}

let cat = new Cat()
cat.sound()

Solution

Arrow functions perform lexical binding and uses the surrounding scope as the scope of this. For example, imagine (for some weird reason) you define Cat inside of a Dog constructor.

function Dog() {
  // do dog like things
  function Cat() { ... }
  Cat.prototype.sound = () => {
    // this == instance of Dog!
  };
}

So whatever the surrounding scope is becomes the scope of an arrow function.

Comments

[Felix Kling]

Every function is lexically scoped though. It's just this (and arguments) that is special in arrow functions.

[Mike Cluck]

@FelixKling Good point. Edited answer to be more accurate.