How to visualize representation of Function constructor objects?

Question

For below code,

function Employee() {
  this.name = "";
  this.dept = "general";
}

below is my understanding on visualizing the representation of above code,

For below code,

function Manager() {
  Employee.call(this);
  this.reports = [];
}
Manager.prototype = Object.create(Employee.prototype);

below is my understanding on visualizing the representation of above code,

Are the above diagrams an accurate representation of the prototype chain created by this Javascript code?

Note: Javascript beginner

You should come with concrete issues rather than "is my code ok?"... — Matías Fidemraizer, Aug 31 '15 at 14:52
@MatíasFidemraizer Please don't recommend sites if you aren't familiar with what's on topic there. This question is clearly not for Code Review, and is probably not good for Programmers either. — Ixrec, Aug 31 '15 at 14:56
@overexchange I believe the actual problem with this question right now is that it's unclear. You initially appear to be asking "Is this flowchart an accurate representation of the prototype chain created by this Javascript code?" but then at the end you ask "What is the purpose of `constructor`?" as if these flowcharts are not your own and you don't understand them yourself. — Ixrec, Aug 31 '15 at 14:58
@overexchange The other reason its unclear is that the title is misleading, as this has nothing to do with employees and managers. It might help to rewrite the title in terms of what this is actually about, namely prototypes and objects. — Ixrec, Aug 31 '15 at 14:59
@overexchange Seems okay to me now. The only other thing I'd comment on is that __proto__ and .prototype are not completely different things as implied by these charts, but of course that's part of the answer. — Ixrec, Aug 31 '15 at 15:05
I believe `Employee`'s `__proto__` is not `Function.prototype`. Since you included `name` and other properties of `Employee`, you probably are talking about an *instance* created by the constructor. `new Employee().__proto__` is `Employee.prototype`. — Derek 朕會功夫, Aug 31 '15 at 15:07
@Ixrec You're wrong. I know JavaScript and I work with it everyday. I still think it's a code review thing, because OP is asking to review the code and check if OP understood the concepts..........or correct the code / statements if something is wrong — Matías Fidemraizer, Aug 31 '15 at 15:08
@Ixrec There's no actual issue on this Q&A. At least, for now. — Matías Fidemraizer, Aug 31 '15 at 15:08
@MatíasFidemraizer Code review is for reviewing your code. This question is not about reviewing code, instead it's about reviewing concepts. — Derek 朕會功夫, Aug 31 '15 at 15:10
@Derek朕會功夫 Maybe the point is that this Q&A has no place on SE network. It should be rephrased... — Matías Fidemraizer, Aug 31 '15 at 15:10
@MatíasFidemraizer I still believe it is attempting to ask "Is this flowchart an accurate representation of the prototype chain created by this Javascript code?" That seems like an answerable "issue" to me. Do you think it is not? — Ixrec, Aug 31 '15 at 15:15
@Ixrec answering issue? check the answer below, I think we need to think, why Bergi is able to answer? — overexchange, Aug 31 '15 at 15:21
@overexchange The fact that someone added an answer doesn't mean that this Q&A fits here in SO..... BTW I'm not a moderator, so it's just my opinion. — Matías Fidemraizer, Aug 31 '15 at 15:33
@overexchange BTW, if you check the close votes, 3 other users have voted that's too broad like me.......... — Matías Fidemraizer, Aug 31 '15 at 15:34
@MatíasFidemraizer If you feel the question is too broad, Bergi's answer will narrow your thoughts on this. It perfectly answered my question. — overexchange, Aug 31 '15 at 15:58
@overexchange This does demonstrate nothing, but if you could get what you expected adding this Q&A, there's no discussion here ;) — Matías Fidemraizer, Aug 31 '15 at 17:31

score 4 · Accepted Answer · edited May 23 '17 at 10:26

The first one is fine on the first look (except maybe for ugly graphics, but that wasn't the question). If you care for UML, you should not put __proto__¹ and prototype next to each other but rather one above the other.

Also, it's important to notice that the Employee constructor function does not have .name² and .dept properties. A new Employee instance would have these.

In the second there are a couple more mistakes:

Again, the Manager function does not have a reports property. A new Manager instance would have name, dept and reports properties.
The right prototype object is Manager.prototype, not Employee.prototype (of which you have two). That's just a labeling issue of course, but still important for precise referencing the graphics.
The Manager.prototype's __proto__ is not Object.prototype, but rather Employee.prototype - that's what you've used Object.create for.
The Object.create(…) should not label the arrow, but rather the object itself (of course that's more a style issue, you don't use a spec, do you?)
The Manager.prototype does not have a constructor property. It does inherit the one from Employee.prototype though. You should consider creating one in your code though, see Why is it necessary to set the prototype constructor?. It would then point to Manager.

_{1: Actually, __proto__ is a getter/setter property on the Object.prototype object. The real, internal prototype link (that is only accessible via Object.set/getPrototypeOf) is typically designated as [[prototype]].

2: In fact, the Employee function does have a .name property, but not the one you meant.}

After saying `obj = new Manager()`, [here](https://github.com/shamhub/Javascript_Programming/blob/master/Topic7_WorkingWithObjects/hierarchy.png) is the representation after reading your answer. Is the representation correct? — overexchange, Aug 31 '15 at 16:43
Is this representation correct [here](https://github.com/shamhub/Javascript_Programming/blob/master/Topic7_WorkingWithObjects/hierarchyUsingNew.png), on using `new Employee` instead of `Object.create(Employee.prototype)`? — overexchange, Sep 01 '15 at 07:40
No, the *[[prototype]]* (`__proto__`) of a `new Employee` (your `WorkerBee.prototype`) is `Employee.prototype`, not `Employee`. Apart from that, the `WorkerBee.prototype` is correctly pictured having `name` and `dept` properties, which a prototype shouldn't really have with proper inheritance. — Bergi, Sep 01 '15 at 08:29
I have one similar [question](http://stackoverflow.com/questions/32521184/how-to-use-prototype-property-amidst-designing-a-function-type-object). — overexchange, Sep 11 '15 at 10:54

How to visualize representation of Function constructor objects?

1 Answers1