父类的私有变量，可以在JavaScript的子类中访问

Question

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 -为什么父类私有变量可以在JavaScript的子类中访问

Chrome和Firefox都有问题。

MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields

是chrome浏览器和Firefox浏览器的bug吗?

问题2 -在Chrome浏览器中，我能够访问私有变量，而在Firefox浏览器中，我无法访问私有变量。

在上面的例子中:

var subClass = new SubClass(); 
subClass.##privateField; //value is printing in chrome and Firefox is throwing "Uncaught SyntaxError: reference to undeclared private field or method #privateField".

这是一个bug在chrome浏览器?

请用一个例子详细解释问题1和问题2。

Answer 1

为什么父类私有变量可以在JavaScript的子类中访问

问题1的代码中没有这样做，如果你真的尝试它，它不起作用:

class Parent {
#privateField = 42;
}
class Child extends Parent {
method() {
console.log(this.#privateField); // SyntaxError: Private field '#privateField' must be declared in an enclosing class
}
}

您已经显示了//Object { #privateField: 42, #subPrivateField: 23 }，这表明您正在控制台中执行此操作。所有这些向您显示的是，new SubClass创建的对象在其中有两个私有字段。因为这个对象既是SubClass的实例又是的实例ClassWithPrivateField的一个实例。但这并不意味着SubClass的代码可以访问#privateField。

问题2 -在Chrome浏览器中，我能够访问私有变量，而在Firefox浏览器中，我无法访问私有变量。

这是Chrome的devtools的一个特性(在版本111中引入的一个相当新的特性)，让您可以将其作为调试辅助。Devtools可以让你做一些用其他方法做不到的事情。这既不是Chrome的bug(你可以这样做)也不是Firefox的bug(你不能)，只是在它们的调试环境中有不同的选择/功能集。

一般来说，不要过多地考虑在devtools中你能做什么和不能做什么。如果你想知道某些东西在实际代码中是否工作，请在实际代码中尝试。