Objects and Object Constructors: Improve clarity of prototype explanations

[mao-sz]

Because

Superseding #29465 due to inactivity.

The topic of constructors and prototypes is a common pain point amongst learners. The most common confusions are the differences between [[Prototype]], .prototype and .__proto__ and similar, as well as exactly what the lesson is referring to when it just uses the word prototype.

There was also a section with incorrect info (.[[Prototype]] is not valid JS - [[Prototype]] has a different use).

This PR

• Removes incorrect content about [[Prototype]]
• Uses [[Prototype]] syntax instead of just prototype specifically when the lesson is referring to an object's internal prototype.
• Adds notes box clarifying difference between Object.getPrototypeOf() and .prototype
• Wraps similar neighbouring section in a note box
• Fixes accessibility of link text label
• Removes a now-repetitive assignment

Issue

Closes #28633

Additional Information

Pull Request Requirements

• I have thoroughly read and understand The Odin Project curriculum contributing guide
• The title of this PR follows the location of change: brief description of change format, e.g. Intro to HTML and CSS lesson: Fix link text
• The Because section summarizes the reason for this PR
• The This PR section has a bullet point list describing the changes in this PR
• If this PR addresses an open issue, it is linked in the Issue section
• If any lesson files are included in this PR, they have been previewed with the Markdown preview tool to ensure it is formatted correctly
• If any lesson files are included in this PR, they follow the Layout Style Guide

[goran1010]

Hi @mao-sz , I've missed that you're working on improving the way that prototypes section is written - nice going by the way, I've written what feels like a couple of novels just trying to help couple of learners answer a simple question: When we say prototype, what do we mean?

That being said, I hope you don't mind a small point I'd like to bring up - specifically this paragraph:

All objects in JavaScript have a prototype, otherwise referred to as its [[Prototype]]. The [[Prototype]] is another object that the original object inherits from, which is to say, the original object has access to all of its [[Prototype]]'s methods and properties.

First sentence is kind of confusing to me, while the second one is, I think, just wrong.
[[Prototype]] is an internal slot whose value can be an object (that the original object inherits from) or null.

Difference is subtle, but important I think - since the way it's worded now, makes it almost seem like [[Prototype]] === .prototype , i.e. that function's property .prototype and object's internal property (link) [[Prototype]] are one and the same.

Sorry if this is confusing, but I'd really like to see an improvement to the current lesson, and really appreciate you taking charge in making it happen.
BTW, have you given any thought about dropping the term [[Prototype]] completely, and just focusing on __proto__, .prototype , as well as getPrototypeOf() and setPrototypeOf (and their distinct uses) - I genuinely think streamlining all the terms used could help with readability.

Edit: Hmm reading fully through the new lesson content, it seems that you've chosen to refer to the concept of a prototype (i.e. an object has a prototype), by calling it [[Prototype]] ...

[mao-sz]

@goran1010 Anyone is allowed to comment on PRs, not just maints. As long as comments are serious of course, and if opinions are shared that it's clear they're opinions/suggestions and not requested changes.

First sentence is kind of confusing to me, while the second one is, I think, just wrong.
[[Prototype]] is an internal slot whose value can be an object (that the original object inherits from) or null.

Difference is subtle, but important I think - since the way it's worded now, makes it almost seem like [[Prototype]] === .prototype , i.e. that function's property .prototype and object's internal property (link) [[Prototype]] are one and the same.

I'm not concerned with there being an unreasonable level of confusion with this first bit because:

1. When you refer to "an object's prototype", it is more often referring to what the object inherits from as opposed to Functions' .prototype property. Since in some documentation (like MDN) [[Prototype]] is used to refer to the same thing, that first sentence says exactly that.

2. The paragraph does not mention anything to do with functions, nor has the .prototype property been mentioned at all yet, so I do not see that being the more common interpretation of that paragraph.

3. [[Prototype]] is an internal slot whose value can be an object (that the original object inherits from) or null.

   That's exactly what the paragraph is saying, and Function.prototype.prototype hasn't been mentioned yet so wouldn't be confused for it here.

---

Dropping use of [[Prototype]] would not be sensible, nor would be the use of __proto__.

The issue with terminology is that "the prototype" is easily misunderstood by learners in this lesson as referring to functions' .prototype property. Docs do not have to worry about this but our lessons do, hence the call for something more clear than just "the prototype". __proto__ is not how documentation refers to the prototype of something. MDN specifically refers to __proto__ as a getter or setter when appropriate. When it does refer to the object that another object inherits from, it either just refers to it as "the prototype" or [[Prototype]]. You can see this in action in the docs for Object.prototype.__proto__ and Object.getPrototypeOf().

The use of __proto__ is also non-standard and explicitly not recommended by docs (and this is mentioned later in the lesson).

These changes aim to mostly use the following terms:

• "[[Prototype]]" - the object that some object inherits from (or null)
  "function's.prototype` property" (or similar) - exactly that

[goran1010]

@mao-sz Interestingly MDN docs on Object prototypes do not mention [[Prototype]] a single time, and the Inheritance and the prototype chain specifically refers to the [[Prototype]] as:

The [[Prototype]] internal slot

But, I've also seen cases where it does as you do in the lesson, refer to the [[Prototype]] as to mean the actual object, and not that the value of that internal slot is that object - but honestly, having written all of this, I've no idea where I stand now.

Though, I do understand why you want to move away from using the term "prototype" as much as possible - it can mean a thousand different things within the context of this lesson.

[mao-sz]

Like you said, MDN docs do use [[Prototype]] to refer to the object instead of specifically the slot only. And even if someone was thinking about just the slot, the context is close enough that you could reasonably figure out what it means. So I'm not concerned about such a confusion being common and unreasonable in the context of TOP. In the same way if someone says "look at that object, look at .name." Technically, they pointed out the property and not the value at that property, but that's not exactly worth being pedantic about.

But the confusion over the lesson somewhat interchangeably using "prototype" by itself with completely separate concepts, that's both common and unreasonable in the context of our own material, so is worth IMO.

[bycdiaz]

This looks good to me. 🚀