Question

我的角色模板我使用以下组件：

 <building-selection 
     (done)="sendToBackend($event)"
     >
 </building-selection>

此组件向用户显示带有复选框的建筑物图像，当他完成检查时，会发出带有所选建筑物的阵列的事件

在下面的打字稿代码中，函数有效：

public async sendToBackend(buildings) 
{
    console.log({buildings}); 
    debugger; // I see buildings "debugger variable preview"
    ... 
}

但如果我在“调试器变量”中注释console.log 预览“我看到消息（如果我们有非异步功能，那么这种现象不会出现）：

ReferenceError：未在eval定义建筑物（eval at   （http://project.localhost:3003/main.bundle.js:53596:17），   ：1：1）在ClientProjectEditorComponent。

... invokeTask   （http://project.localhost:3003/polyfills.bundle.js:14037:14）↵at   HTMLUnknownElement.globalZoneAwareCallback   （http://project.localhost:3003/polyfills.bundle.js:14063:17）”       的原       ：       错误

问题：当debugger语句被注释掉时，为什么console关键字有效？

Answer 1

问题是async函数将转换为生成器函数，每次await时都会迭代。例如：

public async sendToBackend(buildings) 
{
    await sleep();
    debugger; 
    await sleep();
}
// Generated js for target es2015

sendToBackend(buildings) {
    return __awaiter(this, void 0, void 0, function* () {
        yield sleep();
        debugger; 
        yield sleep();
    });
}

正如您所看到的，您的实际函数的代码将以匿名函数结束，该函数将传递给__awaiter辅助函数。参数列表仍然存在于原始函数中，并且匿名函数可以访问参数，但是如果匿名函数没有通过在它的主体中引用它们来捕获参数，那么它们将无法供调试器检查。当您添加console.log时，匿名函数会引用参数，因此它将被捕获，因此可以在手表中进行检查。

上面的代码是为es2015编译的，对es5的讨论类似，但生成的代码更难理解，因为生成器也必须被模拟。

Chrome调试程序 - 从模板

1 个答案: