JS prototype : Inheritance

Question

From the given MDN Article

enter image description here

Why can't we just do the following code instead of the one given in picture , is there any difference between them?

Teacher = Object.create(Person);

• Bergi: Have you tried what you were suggesting? It doesn't work - can you reason why?
• Bergi: Think about the prototype chain of a new Teacher instance. How should that look?
• Sergey: Why asking a question meanwhile you could try it yourself and see the results?
• Robin Zigmond: I would suggest to have a read of this: github.com/getify/You-Dont-Know-JS/blob/master/… - and indeed the whole book. It's a very thorough explanation of what is in fact a very messy and much-misunderstood aspect of JS. Thankfully there is no need for it - firstly ES6 gives us the class keyword with much cleaner syntax for doing all this, but really I think it's best to stay away from trying to use class-based code at all in JS. (Because it's not a class-based language, even the ES6 class is just syntactic sugar.)
• Sarath Chandra: Maybe reading this could help? developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/…

Answer 1

Object.create creates an object which cannot be callable. Even if you pass a function (constructor) as its argument, the object that is created by Object.create will not have the internal [[Call]] property, which is what makes function objects callable. It is not inheritable via the prototype chain.

So, in short, you need to define Teacher as a constructor (or using the class syntax, which still makes it a constructor function), which is something you cannot do with Object.create.

• Himanshu Jotwani: Could you please make it a bit more explanative , I'm new to JS and don't know much about it.
• t.niese: @HimanshuJotwani Object.create(Person) does not return a call- or construtable Object, so for Teacher = Object.create(Person) a new Teacher() throws a TypeError: Teacher is not a constructor and as of that it just does not work.
• Himanshu Jotwani: I executed the code and understood what you were saying ! but one more thing , how does Teacher.prototype = Object.create(Person.prototype) makes it a constructor! Thanks.
• trincot: @HimanshuJotwani, that on itself does not make Teacher a constructor. You must first define Teacher as a constructor function before you can adjust its prototype property like that. For instance var Teacher = function() {}... and then the Teacher.prototype = ... will work.

Answer 2

When you create a new instance with your constructor, e.g.

 const teacher = new Teacher();

then JS does the following under the hood:

1) It creates a new object that inherits the constructors prototype property

2) It calls the constructor with this being the new object:

 const teacher = Object.create(Teacher.prototype); // 1
 Teacher.call(teacher); // 2

Now if you want the teacher to inherit all methods and properties of Person, you have to make Teacher.prototype inherit Person.prototype as the instances inherit that. So this:

 teacher -> Teacher.prototype
 teacher2 ->

has to be changed to

 teacher -> Teacher.prototype -> Person.prototype
 teacher2 ->

therefore the teachers prototype has to inherit the persons prototype.

 Teacher.prototype = Object.create(Person.prototype);

The other line however:

 Teacher = Object.create(Person);

Makes little sense as that destroys the Teacher constructor, as Object.create returns an object and not a function. You could however:

 Object.setPrototypeOf(Teacher, /*to*/ Person);

Then Teacher would inherit all static properties of Person, but the instances wouldn't inherit anything, as Teacher.prototype does not inherit Person.prototype.

• Himanshu Jotwani: So basically what I was doing was to create an object and not a constructor and what MDN article was doing is to create a constructor to further create instances?
• Jonas Wilms: @himanshu no they created a prototype that inherits another prototype.
• Bergi: @JonasWilms But why does its prototype link point to nothing?
• Jonas Wilms: @bergi cause I'm bad at ASCIIart and therefore unable to create a right up arrow.

Answer 3

Your question has two sub-questions.

1) Assigning Teacher.prototype vs Teacher:

let Teacher = function() { /* does something */ } // <-- the constructor
Teacher.prototype = Object.create(Person.prototype); // <-- the constructor did NOT lost 
Teacher = Object.create(Person.prototype); // <-- the constructor lost 

In the lower version you will lose the constructor of Teacher (of course if it existed). And in the upper one, you will overwrite only its prototype.

2) Assigning to Person.prototype vs Person:

Teacher.prototype = Object.create(Person); // Normally `Person` does not have any properties
Teacher.prototype = Object.create(Person.prototype); // But `Person.prototype` does.

In other words, one can very well add properties to Person, not to Prototype, but usually properties are added to Person.prototype so that they can be inherited by instances of Person.

Person.foo = function() {}
const person = new Person()
person.foo // undefined
// vs
Person.prototype.foo = function() {}
const person = new Person()
person.foo // its a function

• Himanshu Jotwani: Could you please clarify here how and why constructor was lost ?
• Nurbol Alpysbayev: Oh it's simple. Just like here: let foo = 1; foo = 2; we lose the 1 value.
• Nurbol Alpysbayev: My advice to you, if you are only beginning, is to practice. It is very hard to understand this javascript's part without practice. Just do your tasks and one day it will start clicking in your head finally.

Answer 4

Teacher = Object.create(Person);

by the above line of code you are assigning a totally different value to Teacher.

Instead, you could have asked a question about the following:

Teacher.prototype = Person.prototype

but in this case also, the problem is, any change to Teacher prototype will also change the Person prototype (because they refer the same object), and that could have undesirable side-effects.

So,

Teacher.prototype = Object.create(Person.prototype);

is correct

• Himanshu Jotwani: I got what you said but what I want to ask is if i create a new obj by Teacher = Object.create(Person) instead of Teacher.prototype = Object.create(Person.prototype) what will be the difference.?