为什么 JavaScript 构造函数中不能使用 Async/Await？

构造函数中的异步调用：不可能的努力

使用 async/await 进行异步编程已经变得司空见惯，但它在构造函数中的应用引起了人们的关注一个有趣的挑战。考虑以下代码片段：

customElements.define('e-mail', class extends HTMLElement {
  async constructor() {
    super()

    let uid = this.getAttribute('data-uid')
    let message = await grabUID(uid)

    const shadowRoot = this.attachShadow({mode: 'open'})
    shadowRoot.innerHTML = `
      <div>
<p>不幸的是，此代码失败并显示错误消息：</p>
<blockquote>类构造函数可能不是异步方法</blockquote>
<p>原因是基本原理：构造函数负责初始化和返回对象实例。然而， async 关键字将函数转换为 Promise 生成器，导致函数返回 Promise 而不是对象本身。这就产生了内在的冲突。</p>
<p><strong>揭示不可能</strong></p>
<p>这种误解源于 async/await 和 Promise 之间的相似性。虽然 async/await 提供了处理 Promise 的语法糖，但它不会改变底层行为。 Promise 表示解析或拒绝生成值的异步操作。</p>
<p>相反，构造函数必须返回正在构造的对象。这种不可变的要求无法与异步函数的承诺生成行为相协调。</p>
<p><strong>解决方法</strong></p>
<p>要克服此限制，请考虑采用以下设计模式之一:</p>
<ol><li>
<strong>初始化函数(init())</strong>：引入初始化函数来执行异步任务。对象实例只能在该函数内使用。</li></ol>
<pre class="brush:php;toolbar:false">var myObj = new myClass();
myObj.init(function() {
    // inside here you can use myObj
});

2. Builder 模式：不直接调用构造函数，而是使用构建函数来创建对象实例。构建器函数返回一个承诺，一旦所有异步任务完成，该承诺就会解析为对象实例。

myClass.build().then(function(myObj) {
    // myObj is returned by the promise, not by the constructor or builder
});

// with async/await:
async function foo () {
    var myObj = await myClass.build();
}

请注意，虽然上面的示例在构建器模式中使用承诺，但也可以使用回调。

静态函数注意事项

需要注意的是 this 关键字静态函数内并不引用实例化对象，而是引用类本身。因此，您不能直接在静态函数中调用方法。相反，使用类名引用方法或将它们声明为静态方法。