Скачать или смотреть How to Change the Console Logging Name of an Object Extended from Built-in Array in JavaScript

Learn how to customize the console logging name for your JavaScript class that extends the built-in `Array` type, and understand the quirks of different browsers.
---
This video is based on the question https://stackoverflow.com/q/68900775/ asked by the user 'qwr' ( https://stackoverflow.com/u/3163618/ ) and on the answer https://stackoverflow.com/a/68900935/ provided by the user 'YK1' ( https://stackoverflow.com/u/1529246/ ) 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: Change console logging name of object extended from built-in Array

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 the Problem: Custom Console Logging for Extended Arrays

When you create a class in JavaScript that extends a built-in type, like Array, you might want your custom class to log its name in the console output differently than the default built-in name. For example, if you have a class called Vector, you'd like it to appear in the console as Vector(3) [1, 2, 3] instead of Array(3) [1, 2, 3].

The Code Behind the Challenge

Let's take a look at a simple implementation of a class extending Array:

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

Even if you attempt to override the toString method to change how it appears in the console, it might still show up as Array:

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

So how can you make sure your class appears correctly in the console?

A Deeper Dive into the Solution

1. Understanding Browser Differences

The behavior of console logging varies between browsers:

Chrome/Edge: They often display the class name (Vector) when logging instances of your custom class.

Firefox: This browser shows built-in types and might display your class as Object rather than Vector.

So, the solution also depends on which browser you're using while developing and debugging your code.

2. Clarifying JavaScript's Object Model

It's important to clear up some misconceptions about the JavaScript object model. The line involving Vector.constructor does not refer to your Vector class. Instead, it points to its constructor — the Function object that underlies all functions in JavaScript.

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

3. Properly Overriding toString

Instead of trying to change the Vector.constructor.prototype.toString, you can directly override Vector.prototype.toString. This way, you ensure that the toString method is correctly associated with instances of your class:

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

4. Representing in Class Syntax

You can also achieve the same thing in a more class-oriented way:

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

4. Outputting Customized Log Messages

Unfortunately, simply overriding toString will not affect how console.log displays the object. However, you can achieve a similar desired effect by concatenating your custom message with the object itself:

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

Conclusion

Customizing how your extended class appears in the console isn't straightforward due to browser differences and misunderstandings regarding JavaScript's object model. By following the above steps and overriding the toString method in a proper way, you can achieve the desired console output.

Let this serve as a reminder of the intricacies involved in developing with JavaScript, particularly when extending built-in objects. Embrace the learning curve and keep experimenting!