JavaScript子类访问父类私有字段？跨浏览器差异问题咨询

代码示例 #

class ClassWithPrivateField {
    #privateField;

    constructor() {
        this.#privateField = 42;
    }
}

class SubClass extends ClassWithPrivateField {
    #subPrivateField;

    constructor() {
        super();
        this.#subPrivateField = 23;
    }
}

new SubClass();

// 控制台输出：Object { #privateField: 42, #subPrivateField: 23 }

问题1：为何子类实例能显示父类私有变量？这是浏览器Bug吗？

这不是浏览器Bug，核心原因如下：

• JavaScript私有字段（#xxx）的封装限制是语法层面的访问控制——你无法在类的外部或子类代码中直接引用父类的私有字段，一旦尝试就会抛出语法错误。
• 浏览器控制台的实例展示是调试工具的特殊行为：为了方便开发者排查问题，控制台会展示实例内部的所有属性（包括私有字段），但这并不代表你能在正常业务代码中访问这些私有字段。

验证示例：

class SubClass extends ClassWithPrivateField {
    constructor() {
        super();
        console.log(this.#privateField); // 抛出语法错误：Private field '#privateField' must be declared in an enclosing class
    }
}

问题2：Chrome中subClass.##privateField能访问父类私有变量，Firefox报错，这是Chrome的Bug吗？

这也不是Chrome的Bug，本质是：

• ##privateField是Chrome DevTools提供的非标准调试专属语法，不属于ECMAScript官方标准。它仅用于调试场景，让开发者能直接查看实例的私有字段。
• Firefox未实现这个非标准调试语法，所以会抛出错误，这完全符合标准规范——因为ECMAScript标准里根本不存在##这种语法。

注意：该语法只能在Chrome控制台中调试使用，绝对不能写入生产代码，否则会在多数环境中报错。

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