ES6 arrow functions not working on the prototype?

Question

When ES6 Arrow functions don't seem to work for assigning a function to an object with prototype.object. Consider the following examples:

function Animal(name, type){  this.name = name;   this.type = type;   this.toString = () => `${this.name} is a ${this.type}`;  } var myDog = new Animal('Max', 'Dog'); console.log(myDog.toString()); //Max is a Dog 

Using the arrow function explicitly in the object definition works, but using the arrow functions with the Object.prototype syntax does not:

function Animal2(name, type){   this.name = name;   this.type = type; } Animal2.prototype.toString = () => `${this.name} is a ${this.type}`;  var myPet2 = new Animal2('Noah', 'cat'); console.log(myPet2.toString()); //is a undefined 

Just as a proof of concept, using the Template string syntax with Object.prototype syntax does work:

function Animal3(name, type){   this.name = name;   this.type = type; } Animal3.prototype.toString = function(){ return `${this.name} is a ${this.type}`;}  var myPet3 = new Animal3('Joey', 'Kangaroo'); console.log(myPet3.toString()); //Joey is a Kangaroo 

Am I missing something obvious? I feel that example 2 should work logically, but I am puzzled by the output. I'm guessing it is a scoping issue, but I am thrown off by the output 'is a undefined'.

ES6 Fiddle

Answer 1

Arrow functions provide a lexical this. It uses the this that is available at the time the function is evaluated.

It is logically equivalent to (the following isn't valid code since you can't have a variable named this):

(function(this){    // code that uses "this"  })(this) 

In your 1st example the arrow function is within the constructor, and this points to the newly generated instance.

In your 3rd example, an arrow function isn't used and standard this behavior works as always (the this in the function scope).

In your 2nd example, you use an arrow function but at the scope it's evaluated, this is global / undefined.