JavaScript类组合：主类属性为何无法访问次级类属性？

错误示例代码 #

class A {
    attrA = 3;
}

class B {
    constructor() {
        this.a = new A;
    }
    attrB = this.a.attrA;
    methB() { console.log(this.a.attrA);}
}

const test = new B;

console.log(test.attrB);
test.methB();

运行结果：test.attrB输出undefined，但test.methB()能正常输出3。

正确示例代码 #

class A {
    attrA = 3;
}

class B {
    constructor() {
        this.a = new A;
        this.z = this.a.attrA
    }
    methB() { console.log(this.a.attrA);}
}

const test = new B;

console.log(test.z);
test.methB();

运行结果：两次输出都是3。

原因解析 #

核心在于类字段的初始化时机早于构造函数：

• 当使用类字段语法（如attrB = this.a.attrA）定义属性时，这些字段的赋值操作会在构造函数执行前完成。
• 错误代码中，初始化attrB时，构造函数里的this.a = new A还没执行，this.a是undefined，因此this.a.attrA返回undefined并直接赋值给attrB。后续构造函数初始化this.a后，attrB也不会重新计算。
• 类方法（如methB）只有在被调用时才会执行内部代码，此时this.a已经被构造函数初始化完成，所以能正常访问attrA。
• 正确写法把属性赋值放在构造函数内，确保this.a先完成初始化，再执行this.z = this.a.attrA，自然能拿到正确的值。

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