JavaScript子类中lessonObj未定义问题及代码修正咨询

问题出在父类Page的构造函数调用init的时机上。当创建Lesson实例时，super()执行Page的构造函数，此时调用的this.init()虽理论上应指向子类Lesson的init方法，但受类初始化顺序影响，可能导致子类的init逻辑未完全执行，lessonObj未被正确赋值。

调整父类Page的构造函数，移除自动调用init的逻辑，改为在子类Lesson的构造函数中主动调用init，确保子类初始化逻辑完整执行：

class Item
{
    name;

    constructor(name)
    {
        this.name = name;
    }
}

class Page
{
    pageObj;
    
    constructor()
    {
        // 移除构造函数中的init调用，交由子类控制初始化时机
    }  

    init()
    {
        this.pageObj = new Item('John');
    }  
}

class Lesson extends Page
{
    lessonObj;
    
    constructor()
    {
        super();
        this.init(); // 子类主动触发初始化
    }  

    onClick(event)
    {
        alert(this.pageObj.name);
        alert(this.lessonObj.name);
    }

    init()
    {
        super.init(); // 执行父类初始化逻辑

        this.lessonObj = new Item('Mary');
        document.addEventListener('click', event => this.onClick(event));            
    }  
}

new Lesson();

原代码中用箭头函数绑定this的写法是正确的，能保证onClick中的this指向Lesson实例。修改后，子类init方法会被明确调用，lessonObj会被正确初始化，点击时即可正常访问this.lessonObj.name。

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