以角度访问此对象时变得不确定

Question

我有2个对象OldAnswer和NewAnswer。我正在尝试将OldAnswer对象数组转换为NewAnswer对象数组。

export class AnswerComponent implements OnInit {


answers: OldAnswer[] = [/* some data  */];

newanswers: NewAnswer[];

constructor() {


    this.answers.forEach(function (answer) {

        answer.answers.forEach(function (a){

            for (var key in a) {
                text = // some logic"";     
            }
            // exception in below line
        this.newanswers.push({id: answer.observationId,answer: text});
        });
    });

    }

}

但是我收到“ 无法在未定义的位置调用新答案”。为什么this对象undefined在这里而不是访问答案时为何？

Answer 1

您声明了数组但未初始化。修复：

newanswers: NewAnswer[] = [];

还需要使用箭头功能，以使您的范围不会改变

this.answers.forEach(answer => { 
  answer.answers.forEach( (a) => { 
    for (var key in a) { 
      text = // some logic""; 
    } // exception in below line 

    this.newanswers.push({id: answer.observationId,answer: text}); 
}); }); }

Answer 2

问题的原因：

您将forEach与function()一起使用

解决方案：

使用箭头函数在forEach s中定义函数：

this.answers.forEach((answer) => {

    answer.answers.forEach((a) => {

为什么箭头功能可以解决问题：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this

  

直到箭头函数，每个新函数都定义了自己的此值   （根据调用函数的方式，如果是   构造函数，在严格模式函数调用中未定义，基础对象   如果该函数被称为“对象方法”等）。这证明了   面向对象的编程风格不理想。

（重点是我的）。

由于Angular / TypeScript将生成严格模式的Javascript，因此this将undefined放在function() {}的正文中，因此它将不再引用您的类的对象实例。

注意：还有其他“旧的JavaScript方法”可以解决此问题，但是arrow函数实际上是现在以及在大多数情况下在TypeScript / Angular / ES6中执行此操作的常用方法。

还要在调用push()之前初始化数组

但是，您还将遇到newanswers也未定义的问题（至少在您提供的示例中没有定义，因此正如Simonare注意到的那样，您还应该将其初始化为空数组{{ 1}}。