[英]ES6 arrow functions not working on the prototype?
When ES6 Arrow functions don't seem to work for assigning a function to an object with prototype.object.当 ES6 箭头函数似乎不适用于将 function 分配给带有原型的 object 时。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:在 object 定义中显式使用箭头 function 有效,但使用带有 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
Just as a proof of concept, using the Template string syntax with Object.prototype syntax does work:作为概念证明,使用带有 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
Am I missing something obvious?我错过了一些明显的东西吗? I feel that example 2 should work logically, but I am puzzled by the output.
我觉得示例 2 应该在逻辑上工作,但我对 output 感到困惑。 I'm guessing it is a scoping issue, but I am thrown off by the output 'is a undefined'.
我猜这是一个范围界定问题,但我被 output 'is a undefined' 甩了。
Arrow functions provide a lexical this
.箭头函数提供了一个词法
this
。 It uses the this
that is available at the time the function is evaluated.它使用在评估函数时可用的
this
。
It is logically equivalent to (the following isn't valid code since you can't have a variable named this
):它在逻辑上等同于(以下不是有效代码,因为您不能拥有名为
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.在您的第一个示例中,箭头函数位于构造函数中,
this
指向新生成的实例。
In your 3rd example, an arrow function isn't used and standard this
behavior works as always (the this in the function scope).在你的第三个例子中,没有使用箭头函数,标准的
this
行为像往常一样工作(函数作用域中的 this )。
In your 2nd example, you use an arrow function but at the scope it's evaluated, this
is global / undefined.在你的第二个例子中,你使用了一个箭头函数,但在它评估的范围内,
this
是全局的/未定义的。
Regular function returns a reference to the current JavaScript Object but the arrow function returns the reference to the global window object.常规函数返回对当前 JavaScript 对象的引用,但箭头函数返回对全局窗口对象的引用。
Regular functions are working well with objects using the new keyword.常规函数可以很好地处理使用 new 关键字的对象。 They have the constructor function by which values can be initialized during object creation.
它们具有构造函数,通过该构造函数可以在对象创建期间初始化值。 It can be managed using the prototype chaining but the arrow function does not have constructor function, prototype chaining .
它可以使用原型链进行管理,但箭头函数没有构造函数原型链。 They are not working well with objects.
它们不能很好地处理对象。 They can not be used with the new keyword for assigning memory.
它们不能与 new 关键字一起用于分配内存。
In your first example, you write your arrow key function inside the regular function, then you will get the output.在您的第一个示例中,您将箭头键函数写入常规函数中,然后您将获得输出。
function Animal2(name, type){ this.name = name; this.type = type; } Animal2.prototype.toString = function(){ return () => `${this.name} is a ${this.type}`; } var myPet2 = new Animal2('Noah', 'cat'); console.log(myPet2.toString()()); //Noah is a cat
Reference: Difference between regular function and arrow key function参考:常规功能和方向键功能的区别
arrow function is not have its own this
, it resolved to this
of closest function:箭头 function 没有自己的
this
,它解决this
最接近的 function :
this
resolve to this
of Animal() functionthis
this
动物() functionthis
resolve to global object window
(because it isn't inside any function)this
解析为全局 object window
(因为它不在任何函数中)this
working as always expected because not using arrow funciton.this
正如预期的那样工作,因为不使用箭头功能。 It should be noted that the arrow function doesn't have this for itself and always the 'this' keyword in each arrow function refers to lexical scope, so in your first example, the 'this' keyword refers to the Animal class. It should be noted that the arrow function doesn't have this for itself and always the 'this' keyword in each arrow function refers to lexical scope, so in your first example, the 'this' keyword refers to the Animal class. In your 2nd example, the 'this' keyword refers to the global scope.
在您的第二个示例中,“this”关键字是指全局 scope。 In the 3rd example, because the 'toString' method belongs to the Animal class prototype, therefore it has access to the Animal class scope, in other words, the 'this' keyword inside a prototype's methods refers to the prototype owner.
在第 3 个例子中,因为 'toString' 方法属于 Animal class 原型,因此它可以访问 Animal class scope 的原型,换句话说,原型方法中的 'this' 是指原型所有者。
here there are some useful links:这里有一些有用的链接:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.