Question

我有几天因为一个我无法解释的问题而苦苦挣扎：

我有一个运行良好的Angular 4 CLI项目
我在我的组件的一个方法中有一个箭头函数，用于在我的组件中设置属性
当我在我的箭头功能中在Chrome开发工具（或针对Chrome的VS代码调试器，相同行为）中设置断点时，此上下文未绑定到组件
但是如果我执行代码，那么效果很好

示例代码：

export class MyComponent {

  private message = 'Im here!';

  constructor() {
    const test = () => {
      console.log(this.message);
    };

    test();
  }

}

如果我在一个使用console.log（this.message）的行上放置一个断点，调试器监视中的这个上下文将是 undefined ，但在执行时，它会写'我在这里！'在我的控制台中。

你以前遇到过这个问题吗？我的源地图有问题吗，idk？

Answer 1

可能是因为箭头函数没有自己绑定它，它将此变量设置为其外部环境

参考这个 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

由于实际的Google Chrome浏览器支持箭头功能，因此您可以看到执行箭头功能时定义的消息...

另一方面，由于角度使用转换器与ECMA6一起工作，它实际上将您的代码转换为ECMA5，在这种情况下，此箭头函数将转换为ecma5函数，该函数没有引用变量，这就是你看到未定义的原因......

解决方法是使用

constructor() {
   let self = this;
    const test = () => {
      console.log(self.message);
    };

    test();
  }

Answer 2

当您使用箭头功能在构造函数中运行代码时，它会丢失上下文。

在初始化组件时检查内容的方法是实现OnInit并定义ngOnInit（）函数：

export class MyComponent implements OnInit {

  private message = 'Im here!';

  constructor() {}

  ngOnInit(): void {
    const test = () => {
      console.log(this.message);
    };

    test();
    }

}

Answer 3

我已经尝试过您的示例代码，它在构造函数和 ngOnInit 变体中对我有用。我能够在调试器中看到this的真正价值。所以代码是正确的。您的调试器显然无法正确解析映射文件中的引用。

我注意到当我在调试器中查看另一个变量时，带有单词undefined的弹出窗口与屏幕截图中的弹出窗口看起来不同。你的是一个简单的矩形，而我的是一个矩形，底部有一个指向变量的三角形。虽然Chrome应该自动更新，但为了以防万一，请确保您使用的是最新版本。

Angular CLI // TypeScript // Chrome调试＆gt;箭头功能失去了上下文

3 个答案: