对箭头功能中的“this”感到困惑

Question

我已经看到了很多的讨论这个话题，我已经通过了大量的文章阅读，但我仍然感到困惑的是什么this是指在箭头的功能。

我似乎得到与以下代码相关的运行时错误（简化）：

export class Foo implements OnInit {
myProp: string;
myKeys: Array<any> = [];
mySubKeys: Array<any> = [];
@Input myObj;

. . . 

ngOnInit() {

this.myKeys = Object.keys(this.myObj); 
this.myKeys.forEach((key) => {
    this.myProp = key;
    this.mySubKeys = Object.keys(this.myObj[key]);
    this.mySubKeys.forEach((subkey) => { . . .  
. . . 

错误发生在this.myProp = key ，调试器抱怨this是未定义的。

我的困惑是，对于箭头函数，我理解this是指在调用箭头函数的范围之前的this 。 在这种情况下，前面的范围不是class范围，因此不应该定义this.myProp吗？

我尝试将箭头功能更改为forEach（function（key）{...但有不同的错误。

最后，如果this箭头函数内部不参考class this ，然后我怎么参考class this和相关的class属性（如myProp ）箭头函数内？

Answer 1

原因是函数中this的值取决于函数的调用方式。

在它的如果函数被称为最基层this.myKeys.forEach()值this是在这种情况下是调用上下文myKeys

但是在所有情况下它都不会是myKeys ，所以this.myProp & this.mySubKeys不会返回value ，它会返回undefined或引发错误。

这种不稳定性是Javascript中一个非常普遍的问题，从早期开始就影响了它。

在ES5也有一些我们可以用稳定的值的方法this 。 一个常见的解决方案是将它分配给顶部的另一个变量，通常称为self ，然后在函数体中始终使用self ，如下所示：

ngOnInit() {


   this.myKeys = Object.keys(this.myObj) {

    let self = this; // declare the variable to refer class object
    this.myKeys.forEach((key) => {
        self.myProp = key;
        self.mySubKeys = Object.keys(this.myObj[key]);
        self.mySubKeys.forEach((subkey) => { . . .  
   . . . 

希望这会有所帮助！

Answer 2

您公开的代码中的这个应该按照您的意图工作。 我认为你的问题来自这一行：

this.myKeys = Object.keys(this.myObj) {

有一个开口{当它应该只是一个关闭; 。

this.myKeys = Object.keys(this.myObj);

代码应如下所示：

ngOnInit() {
    this.myKeys = Object.keys(this.myObj);
    this.myKeys.forEach((key) => {
        this.myProp = key;
        this.mySubKeys = Object.keys(this.myObj[key]);

编辑：

添加演示试试这个是有效的： https ： //stackblitz.com/edit/stackoverflow-mykeys-demo

请注意， Input（）也必须具有（）。

Answer 3

来自MDN：

箭头功能没有自己的功能。 使用封闭词法范围的该值; 箭头函数遵循常规变量查找规则。 因此，在搜索当前范围中不存在的内容时，他们最终会从其封闭范围中找到它。