Question

当ES6 Arrow函数似乎无法使用prototype.object将函数赋值给对象时。请考虑以下示例：

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

在对象定义中显式使用箭头函数，但使用带有Object.prototype语法的箭头函数不会：

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 Fiddle

Answer 1

箭头函数提供词法this。它使用评估函数时可用的this。

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

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

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

在第3个示例中，未使用箭头函数，标准this行为一如既往（在函数范围内）。

在第二个示例中，您使用了箭头函数，但在评估的范围内，this是全局/未定义的。

Answer 2

常规函数返回对当前JavaScript对象的引用，但是箭头函数返回对全局窗口对象的引用。

使用new关键字，常规函数可以很好地与对象配合使用。它们具有构造函数函数，通过该函数可以在对象创建期间初始化值。可以使用原型链进行管理，但是arrow函数没有构造函数原型链。它们不能很好地处理对象。它们不能与new关键字一起用于分配内存。

在第一个示例中，将箭头键函数写入常规函数内，然后将获得输出。

sudo

参考：Difference between regular function and arrow key function

ES6箭头功能不适用于原型？

2 个答案: