javascript prototype and new object confusion

Question

While going over frontend master, I got little confused w/ below. Can someone tell me if there is any difference? (in creating Object Chordate and Chordate2 and Chordate3?). HOw do they fundamentally differ??

I thought always doing newObject = new constructor is the way to build new object in javascript but this newObject.prototype = new Constructor threw me off.

  Animal = function(name){this.name = name};
  Animal.prototype.eats = function(){
          return this.name + " is eating"
  }

  Chordate = function(name){this.name = name;}
  Chordate.prototype = new Animal();

  Chordate2 = function(name){this.name = name;}
  Chordate2 = new Animal();

  Chordate3 = new Animal();

-- my own answer --

Probably I need to watch more videos (as I assume they will say this is not recommended but I do understand how this works now. Here was my confusion and clarification.

Every function(which is another object) that gets created is pointed to it's own prototype(basically object) Chordate which is already an object and has it's own prototype pointed to it's own object(prototype), this line(Chordate.prototype = new Animal();) is changing .prototype point to Animal prototype. (which does look hacky, and I need to read and watch more).

So, based on that Chordate2's prototype is also it's own prototype and when you run new Animal on it, it just erases that and only Animal.prototype exists.

Same w/ (except Chordate3.prototype never existed) Chordate3.

Can someone please verify this for me?

Answer 1

That's how inheritance originally works in javascript (and even with classes, the underlying mechanism is still the same).

Basically Chordate is a subclass of Animal. In other languages we'd write:

class Chordate extends Animal {

}

In javascript constructors inherits from objects. Since Animal() is a constructor we need to convert it to an object. So in javascript we do:

Chordate.prototype = new Animal(); // extend Animal

The prototype property holds a prototype or template for how the object created by a constructor should look like. In this case the object created by Chordate should look like an Animal object. When you call new Chordate() the prototype will be copied into this and will be returned as a new instance.

Chordate2 and Chordate3 are just instances of Animal . From the code and the naming of the objects they look like confused code by someone not familiar with javascript. I'd personally expect something like chordate2 = new Chordate() .

Answer 2

The first Chordate assignment "Chordate=function(name){this.name=name;} is assigning a constructor identical to that of Animal, and then the next line adds the Animal() constructor to the Chordate object.

Then Chordate2 starts off with a constructor assignment and then is overwritten as an Animal object with an undefined name attribute since no argument was passed to the constructor.

Finally Chordate3 is just an Animal object with an uninitialized name attribute as well.

Answer 3

I do feel funny about responding to my own question and putting it as an answer but as @torazaburo suggested and it would be good for me to get critic as someone who actually provides an answer(up until now, I have only asked) even if it's wrong so here it goes:

Part of the confusion came as to what below actually is

Object.prototype

I fully understand that when function is created(Animal), it points to its own prototype(which in turn points to base Object(of it's own prototype(this is found by going up the proto chain).

when Chordate function was created, it was pointing to it's own prototype. However, when Chordate.prototype = new Animal was ran, it essentially overwrote it's own prototype and pointed to Animal's prototype. Whether this is not recommended or not, I am eager to find out why. I guess I was more focused on learning how this Object.prototype works and what the relationship was to otherObject(in this case Animal) being created.

 When Chordate2 is ran, 1)it creates a function and have it point to it's own prototype 2)when you run new Animal() = Chordate2, it essentially erases Chordate2 and creates a brand new object and only prototype remains is Animal.prototype. Chordate2's relationship to that is found through __proto__ 

Same concept w/ (except Chordate3.prototype never existed) Chordate3.