javascript – ES6箭头功能不适用于原型?
作者:互联网
当ES6箭头函数似乎不适用于使用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语法的Template字符串语法可以正常工作:
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应该在逻辑上起作用,但我对输出感到困惑.我猜这是一个范围问题,但我被输出’是一个未定义的’抛弃了.
解决方法:
箭头函数提供了一个词汇.它使用在评估函数时可用的this.
它在逻辑上等价于(以下是无效的代码,因为你不能有一个名为this的变量):
(function(this){
// code that uses "this"
})(this)
在第一个示例中,箭头函数位于构造函数中,这指向新生成的实例.
在第3个示例中,未使用箭头函数,并且标准此行为始终有效(函数作用域中的此行为).
在第二个示例中,您使用箭头函数,但在评估的范围内,这是全局/未定义的.
标签:arrow-functions,javascript,ecmascript-6,prototype 来源: https://codeday.me/bug/20190916/1808658.html