Скачать или смотреть Understanding Inherited JavaScript Property Initialization in Constructors

A detailed explanation on how JavaScript handles property initialization in inherited classes and how to correctly access overridden properties during construction.
---
This video is based on the question https://stackoverflow.com/q/73575956/ asked by the user 'AMADANON Inc.' ( https://stackoverflow.com/u/2514521/ ) and on the answer https://stackoverflow.com/a/73576030/ provided by the user 'Barmar' ( https://stackoverflow.com/u/1491895/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Inherited javascript property not set during constructor

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Inherited JavaScript Property Initialization in Constructors

When working with JavaScript inheritance, you may encounter a seemingly puzzling issue: overridden properties in subclasses don't behave as you might expect during the construction phase. Let's break down the problem you're facing and clarify how JavaScript handles this scenario.

The Problem Explained

In JavaScript, when you create a subclass that extends a base class, you might expect the subclass’s properties to take precedence immediately during the object's construction. However, this is not the case due to the order in which properties are initialized in the class hierarchy. Here's a typical scenario:

You have two classes, A and B, where B extends A. The following example showcases this behavior:

[[See Video to Reveal this Text or Code Snippet]]

Despite constructing an instance of B, the console logs "A" when the superclass constructor's show method is called. This might lead to confusion, as it seems that the subclass property was not set correctly.

Understanding the Initialization Order

1. Construction Sequence

When an instance of B is created:

The JavaScript engine first initializes the base class A. At this point, this.id is set to "A" in the constructor of A.

Immediately after initializing A, the constructor of A calls this.show(), which logs this.id. Since the id is still "A" at this moment, that's what gets printed.

After the base class constructor completes, JavaScript initializes the subclass B's property, setting this.id to "B". So now, when o.show() is called, it logs "B".

2. The Intermediate State

During the construction process, the object is still in an intermediate state where the properties of the subclass haven't yet been set. This means any method calls that rely on these properties will not yield the expected outputs until the entire object is instantiated.

How to Get the Expected Output "B" in Superclass Constructor

Solution: Use a Method to Set the Property Before Call

To achieve the desired output where "B" is logged during the superclass initialization, you could shift logic around as follows:

[[See Video to Reveal this Text or Code Snippet]]

By calling this.setId() in the constructor of A, you give the subclass the opportunity to set the id property before invoking any methods that depend on it. This adjustment effectively ensures that "B" is displayed during the object's construction.

Conclusion

Understanding how JavaScript initializes properties in an inheritance chain is crucial for predicting the behavior of your classes. By being mindful of the order in which constructors are executed and the state of the object during this time, you can avoid confusion and achieve the expected results in your code.

Feel free to apply these principles to your own projects, and you'll find yourself utilizing JavaScript inheritance more effectively!