为什么在调试器中未定义“ this”，但在console.log中可打印？

Question

当在设置断点console.log语句，为什么会this可以在调试器未定义但声明没有问题打印？ 我在范围方面是否有所遗漏？

export class OptionsSidebarComponent {

  ... 

  public filters: Object = new Object();

  ... 

  public generateFilters() {
    for (let property in this.terms) {
      if (this.terms.hasOwnProperty(property) && this.terms[property] !== null) {

        if (!this.filters.hasOwnProperty(this.productGroup.id)){
          this.filters[this.productGroup.id] = new Filters();
        }

        this.terms[property].forEach((term) => {
          console.log(this.filters);
        });
      }
    }
  }
}

Answer 1

使用typescript调试时，请记住，编译器可以重命名变量。 在控制台中使用不带重命名的源映射的原始名称将显示未定义，即使原始值不是。 确保在监视或控制台命令中使用已转换的名称。

Answer 2

如果引用this与自己的类里面你的console.log语句，你在它的相关范围使用。 根据您使用的框架，使用不同的术语来引用您的类... AngularJS使用了$scope -Angular 2+使用this来引用当前的类（或当前的作用域/上下文）。

在调试器中使用this ，您将在其范围之外使用它。 它不再引用您想要的类。

Angular中的每个组件都使用this引用自己。 这是一篇文章，将进行详细说明： https : //angular-2-training-book.rangle.io/handout/features/refresher_on_this.html

如果我们将其简化为基本的javascript并将您的类视为一个函数，那么一个很好的例子就是：

function example(){
    var anything = 10;
    console.log(anything); //output: 10
}

console.log(anything); //undefined! we're out of scope :)

因此，从这个角度来看， this并不是什么神奇的事情。 它只是由Angular提供给我们的，目的是使我们对组件内部其他内容的引用更加容易。