为什么我无法访问同名的父 class 属性？

Question

I have two classes A and B in Javascript, A extends B and they both have a property with the same name in their constructor.

I am trying to access to the value of property name from class B, but it is replaced by A's when creating a new object from A.

 class B { constructor(){ this.name = "I AM B" } speakB(){ return this.name } } class A extends B { constructor(){ super() this.name = "I AM A" } speakA(){ return this.speakB() + " and " + this.name; } } var b = new B(); console.log(b.speakB()) //I AM B var a = new A(); console.log(a.speakA()) //I AM A and I AM A

As expected result I want to get I AM B and I AM A but I am getting I AM A and I AM A . I also tried with super.speakB() + " and " + this.name; but with no success.

Is there something I am missing when declaring the classes?

Answer 1

When you extend a class with a derived class and then instantiate the derived class, there's only ONE object there. this.name refers to the same this and the same property on that object no matter which class the code is in.

They key here is that there's only one object that the base and derived class are both setting properties on. So, if you're using the same named property, it will be the same value no matter which base or derived class is setting it.

Think of it this way:

let obj = new A();
obj.name = "Bob";

There's only one object with one .name property. The methods of both A and B both operate on the same object so using the same property name in methods A and B will be setting the exact same property.

When you do this:

 this.name = "I AM A".

in the derived class, you're overwriting the previous value that the parent B set for the .name property.

It means that I cannot use the same property name for both classes?

Correct, not if you intend for the two properties to have separate values. Note, there are also many cases where a derived class wants to access the properties that the base class sets so this is a feature too. But, if you intend for two properties to be separate for base and derived, then you must give them different names.

---

One possible source of confusion for some people is that methods declared via the class syntax are kept separate for each class. Each class has its own prototype object and the prototypes are searched in a chain to resolve methods. This does allow you to specifically call a base class method, even though both base class and derived have defined the same named method.

But, this is not true for regular instance property assignments this.x = "foo" as those are assigned to the instance object, not on the prototype object. Remember, the prototype is shared across all object instances so you can't store instance state on the prototype.