创建Deck类实例后id与remaining属性始终为undefined是什么原因？

核心是异步代码执行时序问题：

• fetch 属于异步网络请求，触发后不会阻塞后续代码执行，构造函数会在网络请求返回前就执行结束
• 你在实例化完成后立刻打印属性，此时请求成功的then回调还未执行，id和remaining还没被赋值，因此返回undefined

推荐使用静态异步工厂方法的规范写法，避免在构造函数中执行异步逻辑：

class Deck {
    constructor(id, remaining) {
        this.id = id;
        this.remaining = remaining;
    }

    // 静态异步方法，专门处理异步初始化逻辑
    static async create(numberOfDeck, jokersEnabled) {
        let url = jokersEnabled 
            ? `https://www.deckofcardsapi.com/api/deck/new/shuffle/?deck_count=${numberOfDeck}&jokers_enabled=true`
            : `https://www.deckofcardsapi.com/api/deck/new/shuffle/?deck_count=${numberOfDeck}`;
        
        const res = await fetch(url);
        const deckData = await res.json();
        return new Deck(deckData.deck_id, deckData.remaining);
    }
}

// 调用方式：需要在async作用域内用await获取实例
(async () => {
    const deck = await Deck.create(1, true);
    console.log(`${deck.id} ${deck.remaining}`);
})();

如果要保留原有调用逻辑，也可以给实例增加初始化完成状态的监听，不过静态工厂方法是行业通用的最佳实践，代码可维护性更高。

内容的提问来源于stack exchange，提问作者Ludovic-972