Javascript 困惑于；这"；in-arrow函数

我已经看过很多关于这个话题的讨论，也读过很多文章，但是我仍然不清楚这个在箭头函数中指的是什么

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

导出类Foo实现OnInit{
myProp:string；
myKeys:Array=[]；
mySubKeys:Array=[]；
@输入myObj；
. . . 
恩戈尼尼特（）{
this.myKeys=Object.keys（this.myObj）；
this.myKeys.forEach（（key）=>{
this.myProp=key；
this.mySubKeys=Object.keys（this.myObj[key]）；
this.mysubkey.forEach（（子键）=>{。
. . . 

错误发生在

this.myProp=key

处，调试器抱怨

this

未定义

我的困惑是，对于arrow函数，我理解

this

指的是调用arrow函数的作用域之前的

this

。在这种情况下，前面的作用域不是

类

作用域，因此不应该定义

this.myProp

我尝试将箭头函数更改为forEach（function（key）{…但出现了不同的错误

最后，如果arrow函数中的

this

没有引用arrow函数中的

类
this
，那么如何引用
类
this
以及相关的
类
属性（例如
myProp
）

arrow函数没有自己的this。使用封闭词法作用域的this值；arrow函数遵循普通变量查找规则。因此，在搜索当前作用域中不存在的this时，它们最终会从其封闭作用域中找到this

来自MDN：

arrow函数没有自己的this。使用封闭词法作用域的this值；arrow函数遵循普通变量查找规则。因此，在搜索当前作用域中不存在的this时，它们最终会从其封闭作用域中找到this

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

在最基本的层次上，如果函数被称为
this.myKeys.forEach（）
，那么
this
的值就是调用上下文，在这种情况下，调用上下文是
myKeys

但是，在所有情况下，它不会是
myKeys
，因此
this.myProp&this.mySubKeys
不会返回
值，而是返回未定义的值或引发错误

这种不稳定性在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) => { . . .  
   . . . 

希望这会有所帮助！
原因是函数中的
this
值取决于函数的调用方式

在最基本的层次上，如果函数被称为
this.myKeys.forEach（）
，那么
this
的值就是调用上下文，在这种情况下，调用上下文是
myKeys

但是，在所有情况下，它不会是
myKeys
，因此
this.myProp&this.mySubKeys
不会返回
值，而是返回未定义的值或引发错误

这种不稳定性在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) => { . . .  
   . . . 

希望这会有所帮助！
您公开的代码中的这个应该按照您的意愿工作。
我认为你的问题来自这一行：

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]);

编辑：

添加演示以尝试此正在运行：

请注意，Input（）也必须有（）。
您公开的代码中的这个应该按照您的意愿工作。
我认为你的问题来自这一行：

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]);

编辑：

添加演示以尝试此正在运行：

请注意，输入（）必须具有（）也一样。
可能重复的你能添加你正在接收的错误吗？可能重复的可能重复的可能重复的你能添加你正在接收的错误吗？可能重复的可能重复的可能重复的成功了！非常感谢！现在的问题是，为什么这样做有效？我以为箭头函数应该不起作用o从随附的上下文中看它的
这个
，类应该是哪个
这个
，对吗？我已经更新了答案并解释了请检查谢谢你，帕拉姆。这非常有帮助。现在困扰我的最后一件事是另一张海报，chiril sarajiu，有一篇帖子（自从被删除后）这表明Stackblitz复制了我的代码，并表明没有问题。
this
在他的
forEach
块中运行良好，无需声明额外的
self
变量。因此，现在我非常困惑。我开始认为Firefox调试器可能有问题？根据“如果在对象上调用函数，例如在obj.myMethod（）或t中