Скачать или смотреть Understanding Access to static Functions in JavaScript Classes

Explore why static variables can't be accessed from static objects in JavaScript classes and learn effective solutions.
---
This video is based on the question https://stackoverflow.com/q/64895770/ asked by the user 'Alex Shirlaw' ( https://stackoverflow.com/u/14662756/ ) and on the answer https://stackoverflow.com/a/64896928/ provided by the user 'Alex Shirlaw' ( https://stackoverflow.com/u/14662756/ ) 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: Why can't I acces a static function in a static Object from the same Class?

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.
---
Why Can't I Access a Static Function in a Static Object from the Same Class?

When diving into object-oriented programming in JavaScript, especially when dealing with static class variables and functions, you might encounter some puzzling situations. One common problem developers face is not being able to access a static function within a static object, particularly when trying to reference a static variable of the same class. This article addresses this issue, breaks down the problem, and walks you through the solution.

The Problem

Imagine you have a class that includes a static object with methods. You want to access a static variable from this static object, but you're facing an obstacle. Here’s a snapshot of the problematic code:

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

In the above code, we attempt to log this.number from within the function of the info static object, but it returns undefined. Why is that?

Understanding the Issue

The confusion arises from the scope of this in JavaScript. When used in a regular function, this refers to the calling object. However, inside the static object, this does not refer to the Cards class but instead refers to the static context defined by the object itself, which does not have access to Cards.number or this.number.

Key Points to Note

this in the static object's function context does not point to the class itself (e.g., Cards).

Static methods and properties are tied to the class itself and not to any instance of the class.

The Solution

To access the static variable from within the static object, you can reference it directly through the class name. Here’s how you can modify your static function:

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

Why Does This Work?

By replacing this.number with Cards.number, we directly refer to the static variable defined in the Cards class, allowing us to access its value correctly.

Additional Problem: TypeError with Instance Method

You might also be encountering a type error when you try to call partie1.name() which throws TypeError: partie1.name is not a function. This is due to defining a method named name in the class and also having a property named name. JavaScript confuses the property and the method name.

Solution for TypeError

To resolve this issue, consider renaming either the property or the method. For example, change the method to displayName() like this:

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

Conclusion

Navigating JavaScript classes and their static properties can be tricky, but understanding how this works in different contexts is essential. By recognizing when to reference the class name directly, you can avoid common pitfalls and write cleaner, more effective code. Now that you have the insights into accessing static variables in JavaScript classes, you should be better equipped to handle similar challenges in your coding journey.