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，它将返回未定义或引发错误。

这种不稳定性是 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://cloudinary.com/product_updates/custom_fonts

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

Answer 3

来自MDN：

箭头函数本身没有此函数。使用封闭词汇范围的this值；箭头函数遵循正常的变量查找规则。因此，在搜索当前范围中不存在的内容时，他们最终从其范围内找到了它。

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

3 个答案: