无法在 setTimeout 函数下获取组件变量答案

【问题标题】：not able to get component variables under setTimeout function无法在 setTimeout 函数下获取组件变量
【发布时间】：2018-10-11 16:41:13
【问题描述】：

我是 Angular(6) 的新手，我遇到了无法在 setTimeout 函数下获取组件变量的问题。看看代码，在那里解释我的问题。

    export class ConSellerDraftsolSecOneComponent implements OnInit {
      draftSolutionForm: FormGroup;

    //Other code

    //ngOnIt
     ngOnInit() {
        this.draftSolutionForm = this.formBuilder.group({
          title: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
          product: [''],
        })
    }

    //function
     autosavedraftsolution() {
    //here, it is working
     console.log(this.draftSolutionForm);
     setTimeout(function () {
     //here, it is not working, showing "undefined" and even intellisense is not supporting me here to do this
     console.log(this.draftSolutionForm);
        }, 3000);
      }
   }

帮我找出原因。谢谢。

【问题讨论】：

尝试使用 lambda 和 setInterval( () => { console.log(this.draftSolutionForm}, 3000);
可能是由于箭头功能 -> var ref= this; 和 ref.draftSolutionForm 将解决您的问题
就像@bookboy 指出的那样-function() {} 创建了它自己的范围，因此在它的主体中使用this 将引用函数的上下文。要保留原始范围，您应该使用 lambda/箭头函数 () => {}
@ful-stackz 箭头函数也创建了自己的作用域。每个功能都可以。 this 不是指scope，而是指context。这些是不同的。箭头函数在创建时绑定到词法范围，您可以通过(function() {}).bind(this) 获得类似的结果，但箭头函数是更简洁的表达方式。为了比较，function a() { function b() {} } 表示b 在a 的范围内，您不能在运行时更改它。\
@vlaz 感谢您的澄清！我滥用了这些术语，可能会使作者感到困惑，所以感谢您的意见！

标签： javascript angular angular6

【解决方案1】：

您需要使用 lambda 表达式：

setTimeout(() => {
 console.log(this.draftSolutionForm);
    }, 3000);

【讨论】：

() => 这个所谓的箭头函数可能会让人感到困惑，你说 lambda，你只是提醒我 c# days，准备 lambda 表达式

【解决方案2】：

这是因为在 function() 中，this 指向函数的上下文。

autosavedraftsolution() {
  setTimeout(() => {
    //here, it is not working and even intellisense is not supporting me here
    console.log(this.draftSolutionForm);
  }, 3000);
}

【讨论】：

感谢您的贡献。我真的很感激。
简而言之，箭头函数绑定到当前 this 上，在类体中常用 this

【解决方案3】：

 export class ConSellerDraftsolSecOneComponent implements OnInit {
      draftSolutionForm: FormGroup;

    //Other code

    //ngOnIt
     ngOnInit() {
        this.draftSolutionForm = this.formBuilder.group({
          title: ['', Validators.compose([Validators.required, Validators.minLength(6)])],
          product: [''],
        })
    }

    //function
     autosavedraftsolution() {
    //here, it is working
     console.log(this.draftSolutionForm);
     setTimeout(() => {console.log(this.draftSolutionForm);}, 3000);


      }
   }

【讨论】：

感谢您的贡献。我真的很感激。

【解决方案4】：

试试

.bind(这个)

setTimeout(function () {
  console.log(this.draftSolutionForm);
}.bind(this), 3000);

【讨论】：

感谢您的贡献。我真的很感激。

【解决方案5】：

ES6/2015 箭头函数表达式的语法比函数表达式短，并且没有自己的this

setTimeout(() => {
 // this => ConSellerDraftsolSecOneComponent 
 console.log(this.draftSolutionForm);
 }, 3000);

或者你可以定义一个变量来访问this（词法范围）

let _this = this;
setTimeout(function () {
  console.log(_this.draftSolutionForm);
}, 3000);

最后bind 方法创建了一个新函数，在调用该函数时，将其 this 关键字设置为提供的值，并在调用新函数时在任何提供的参数之前提供给定的参数序列

setTimeout(function () {
  console.log(this.draftSolutionForm);
}.bind(this), 3000);

【讨论】：

感谢您的贡献。我真的很感激。