ES6箭头函数在原型上不起作用？

Question

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

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

作为概念证明，将模板字符串语法与Object.Prototype语法一起使用确实有效：

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

我是不是漏掉了一些明显的东西？我觉得示例2在逻辑上应该工作，但我对输出感到困惑。我猜这是一个范围问题，但我被输出“是一个未定义的”抛了出来。

ES6小提琴

Answer 1

箭头函数提供了一个词法上的this。它使用在计算函数时可用的this。

它在逻辑上等效于（以下代码不是有效代码，因为您不能使用名为this)的变量：

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

在第一个示例中，arrow函数位于构造函数中，这个指向新生成的实例。