角CLI // //打字稿铬调试> Arrow功能丧失方面

，因为一个问题了几天我挣扎，我无法解释：角CLI // //打字稿铬调试> Arrow功能丧失方面

我有一个角4 CLI项目运行良好
我有我的组件的方法的一个箭头的功能，设置在我的组件属性
当我在我的箭功能将断点在Chrome浏览器开发工具（或VS代码调试器针对Chrome浏览器相同的行为）时，这个背景并不局限于组件
但如果我执行的代码，它的工作原理以及

示例代码：

export class MyComponent { 

    private message = 'Im here!'; 

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

    test(); 
    } 

}

如果我把一个断点上的console.log（this.message）的线，这种情况下会undefined在调试器中，但在执行时，它会写'Im here！'在我的控制台。

你有没有经历过这个问题？我的源地图idk有问题吗？

来源

2017-10-17 Yoann B

So ** _ this **，转译器生成的上下文变量被调试器识别。这工作，但不方便，是没有办法使用“真正的”**这个**上下文 –

我有同样的问题，只是在铬开发工具，我可以看到“这个”的价值，但在vscode它是未定义的 – benshabatnoam

尝试“_this”而不是“this”。我发现这是因为编译器生成输出js代码的方式。 –

这可能是因为箭头功能不绑定自己的这个，它设置这个变量从外部环境

参阅本 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

，并因为实际的谷歌Chrome浏览器支持箭头的功能，你可以请参阅执行箭头功能时定义的消息...

另一方面，由于角度使用转换器与ECMA6一起使用，因此它实际上将您的代码转换为ECMA5，在这种情况下，此箭头函数将被转换到ecma5乐趣ction是不具有对这个变量的引用，这就是为什么你看到的是未定义...

一种解决方法将使用

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

    test(); 
    }

来源

2017-10-17 12:48:27

从TS转换到ES5，但它是相同的原理。不幸的是，这不能工作，因为当前上下文丢失的简单原因，所以即使** self **变量不会是可见的。 –

当你与它失去箭头的功能构造运行代码上下文。

你可以做什么时，该组件被初始化检查的事情就是实现的OnInit和定义ngOnInit（）函数：

export class MyComponent implements OnInit { 

    private message = 'Im here!'; 

    constructor() {} 

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

    test(); 
    } 

}

来源

2017-10-17 12:51:56 HMarteau

我已经尝试过，结果相同，请参阅http://nsa39.casimages.com/img/2017/10/17/171017032635702838.png –

我曾尝试你的示例代码和它运作良好，对我来说这两个构造函数和ngOnInit变体。我可以在我的调试器中看到this的真实价值。所以代码是正确的。您的调试器显然不能正确解析映射文件的引用。

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

来源

2017-10-22 04:57:25 Andrey

角CLI // //打字稿铬调试> Arrow功能丧失方面

回答

相关问题