Open Bug 1201380 Opened 4 years ago Updated 3 years ago

Examples and text don't match up in "details of the object model" page


(Developer Documentation :: JavaScript, defect)

Not set


(Not tracked)


(Reporter: dvincent, Unassigned)


A twitter user (@m5) reported that the examples on this page:
are different from what is being described in the text.

He is looking at where the specific problems are, but "we" (i.e. someone other than me) may want to take a look at them also.
Right - it seems that over time there's been some divergence between the original concept of the tutorial and the actual state of the code examples.

To be honest, I think that the whole idea of using plain scalar value properties as a way of explaining JavaScript inheritance is kind-of questionable, because that's not a terribly common use case; JavaScript is weird about that, and generally inheritance is used for inheriting behaviors (methods). I'm just a tiny person however and I have no business designing what amounts to curricula in the tutorial content of the MDN site, so that's just my opinion on the matter.
Are they somebody looking into this ticket?
I assume so, but I think there is a backlog.
If there is progress by the assigned technician, Can the technician update the same?
Sham, this bug has not yet been triaged; you'll need some patience.
Approxi(In reply to Jean-Yves Perrier [:teoli] from comment #5)
> Sham, this bug has not yet been triaged; you'll need some patience.

Approximately, how much time would it take?
Any update on this ticket?
This article is pretty old. It was merged into a single page from a multi-part description of OOP in JS. The version of 2010 looks mostly the same as the article stands today, see$revision/61105

Where exactly do code examples and text diverge? The comparison of Java and JavaScript doesn't work 1:1, but I think the authors of this article attempt to explain some concepts by comparing to Java, probably because a lot of people come from a Java-like OOP world.

This doesn't even talk about ES6 classes and I doubt this will be updated in a way to talk about ES6 classes. There will be new articles describing JS classes/OOP/etc on MDN and elsewhere.

To move forward here, I think it would be good to mention some of the divergences between code and text, so that we can fix that. Hints? I haven't seen obvious ones by scanning through the article.

Sham, demanding for updates is unfair. We are a community – we document this stuff together! There is no request->service here.
OK, here are some more specific critiques.

The introductory caveat about the assumption of reader background, "This chapter assumes that you are already somewhat familiar with JavaScript and that you have used JavaScript functions to create simple objects.", is really weird considering the content that follows. It also completely ignores the fact that the text also makes the assumption that the Java examples will have some illustrative value to the reader.

In the initial section titled "Class-based vs. prototype-based languages", there's a sentence that reads, " A prototype-based language has the notion of a prototypical object, an object used as a template from which to get the initial properties for a new object."  That statement is deeply troubling, as it seems very likely to give an impression that's quite different from reality. The rest of that paragraph has similarly misleading statements.

Similar inaccurate statements follow. Almost every paragraph seems questionable to me.

The entire idea of explaining JavaScript prototype inheritance via an example involving prototype properties with scalar values seems fundamentally misguided, as in practical coding that's a fairly uncommon use of the prototype chain mechanism. That's due to the big difference between *references* to a property versus *assignments* to a property.

Phraseology along variations of, "... the object gets default values ..." pervades the tutorial. That's absolutely not how the prototype mechanism works; objects never really "get" anything from their prototype chain. Helping novices build a mental model that's fundamentally inaccurate seems like a terrible idea.

Right before the section titled, "Creating objects with simple definitions", there's a "Note" section that warns that JavaScript doesn't have a "difference between classes and instances". While I understand what that is intended to mean, it might be fairly surprising to a novice who has just read about the "instanceof" operator in JavaScript.

In the "Inheriting Properties" section, there's a block of information that *looks like* a code example, but which is really intended to convey what properties and property values an object appears to have. Because that section looks like code, it might be very confusing to the novice; does it mean that constructing the new object has the same effect as that code? Those who know JavaScript understand that it definitely does not mean that, but that's what the example looks like. This pattern is repeated, and the problem is exacerbated by subsequent examples that look almost identical but which *are* supposed to be interpreted as code samples.

There's a brief discussion of the use of the "||" operator to set default values. It is inappropriate in this discussion as it can only be properly understood with a grasp of JavaScript boolean value interpretation, and only a confusing warning is given about the ways in which the simple "||" default value pattern may be inapplicable.

Right after that, there's a section that talks about the properties of an instance called "Jane". Its properties are described with a similar block of stuff that looks like code, but isn't intended to be interpreted as code. On top of that, this one relates object properties to their values with "==" instead of the "=" used in earlier similar blocks of code.

Things start to get *really* bad in the section about "More Flexible Constructors". In the second set of constructors, for "Employee", "WorkedBee", and "Engineer", the code and the descriptions of the code are largely just completely wrong. Actually, the code itself is bad code, and the description of the code is inaccurate. Because the constructors here are assigning instance property values directly, there's really no "inheritance" going on at all. When the smoke clears from the chain of initialization functions (which involves the clumsy "base" property of the instance, a property that ends up referring to the wrong constructor!), all the properties of the instance will be "own" properties, and there's no inheritance going on at all after that point.

Those issues are addressed in the subsequent paragraphs, which seem to be intended to dismiss the previous couple thousand pixels of vertical scroll distance as being an errant way of doing things. I strongly question that sort of approach to providing guidance to new programmers. Spending time showing off the workings of code that's later going to be dismissed as a bad approach is just nuts.

That later code also employs the bad practice of setting a prototype object to an instance of a "parent" class constructed via "new" instead of "Object.create()".

The section titled "Property inheritance revisited" proceeds thereafter to explain all the ways in which the terminology of the preceding text has been misleading in "subtle" ways. (Note that it still uses the bad practice of initializing a prototype to an instance created with "new". It's 2015: that should not be part of MDN.) 

This just goes on and on. After spending this much time looking over that page, I'm thinking that the best thing to do is to just put it out of its misery. The topics discussed are important, but a new JavaScript programmer is going to need a much more gradual, well-presented introduction to the mechanisms behind the ways that JavaScript object creation and object property lookup work. Examples should all be based on practical common patterns used in real code, and serious care needs to be taken in making sure that code samples presented, when taken out of context, are at least not poisonous; new programmers will inevitably skim the content for samples to copy/paste into their own projects. Mixing up real code samples with code-like explanatory text is a horrible idea and should be assiduously avoided.

It's easy for me to criticize this content, but I want to acknowledge that I understand some group of people went to some considerable trouble to create it. I respect that thoroughly. I don't have a lot of visibility into any overall pedagogical strategy for how articles like this one are intended to work, nor into the framework into which it's supposed to fit. I think MDN is important and I link to it with great frequency from Stackoverflow etc. I am happy to help to the extent I can - I'm just a random person on the Internet so I'm not sure of what potential use I might be. (Of course, it's possible that nobody would agree with anything I've written above, which is OK.)
I think the only problem in the exposition lies in the "More flexible constructor" section. Here, and in the immediately preceding figure, the inheritance scheme seems to be incoherent with the initial presentation which used "", indeed here that constructor invocation is lost, so it appears legitimate to ask where, in this new presentation, the inheritance lies.
I think there is a major problem in the article. The article says that the properties added to WorkerBee by constructor Employee are inherited properties through the prototype. But this is wrong.

The constructor function Employee() is not called as a constructor and adds the properties in the worker object itself.
I am beginner JavaScript learner and I started reading 'Details of the object model', and I got confused with the terminology and examples used. I could not see how inheritance work in JavaScript, I thought my understanding of prototype is flawed. Thankfully,I found this page and read the previous comments.
Please correct this page, it is very difficult for beginners like me with OOPs and strongly-typed language background.
It's 2017 and it seems that this article has not been properly revised yet. I understand that rewriting such a comprehensive article is a lot of hard work but it's part of the Javascript Learning Guide and a lot of newcomers treat MDN as the most authoritative source of information (apart from the specifications). Having misleading and inaccurate information here is worth than having nothing on the details of the object model.
By saying this I'd like to draw the attention of Javascript experts to this article - we should revise and update it together.
You need to log in before you can comment on or make changes to this bug.