JS跨类访问属性报错：如何在Image类中访问Card类实例的属性

你遇到的报错本质是变量初始化时序问题：
执行let card = new Card()时，JS会先运行Card类的构造函数逻辑，等构造函数完全执行完毕、返回实例后，才会把实例赋值给card变量。而你在Card构造函数里就调用了setImage()方法创建Image实例，此时card变量还没完成赋值，所以Image构造函数里访问全局的card就会抛出未初始化的错误。

最合理的写法是把Card实例作为参数传入Image构造函数，避免依赖全局变量，还能支持多Card实例的场景，耦合度更低。

修改后代码 #

Card类修改 #

class Card {
    constructor() {
        this.container = document.getElementById('main');
        this.element = document.createE( 'div', {class: "card" } );
        this.container.appendChild( this.element );
        this.setImage();
    }

    setImage() {
       // 把当前Card实例自身作为参数传给Image
       new Image(this)
    }
}

Image类修改 #

class Image {
    // 接收传入的Card实例
    constructor( cardInstance ) {
        this.element = document.createE( 'img', { class: "image" } );
        // 使用传入的实例访问container属性
        cardInstance.container.appendChild( this.element );
    }
}

初始化代码无需修改 #

let card = new Card()

你也可以提前声明card变量再赋值，修改初始化代码为：

let card;
card = new Card();

这种写法虽然能解决报错，但强依赖全局变量，后续如果创建多个Card实例会出现变量覆盖问题，可维护性差，不建议使用。

内容的提问来源于stack exchange，提问作者Javier Ortega