Javascript Prototype Chain Self Reference

This question is about how javascript prototypes work. In particular I do not understand why in the example below 'Machine' appears to have a prototype of itself. In the screen ca

Solution 1:

It's better to use Object.create instead of creating an instance of Parent to set prototype of Child for (at least) 2 reasons.

1. When you define the Child type you may not want to create instances of Parent at this point due to the state of the application not being ready to create instances of Parent type at this point (like dependencies that need to be passed to the Parent constructor that are not available when defining Child).

2. Parent has instance specific members (any this.something = in Parent constructor) and creating an instance of Parent puts these instance specific members on Child.prototype.

That is why you see Machine (an instance of type Machine) with a whoAmi member and a Machine as the __proto__ of this Machine instance.

The following code may produce output you'd expect and because the constructor is fixed after setting prototype part of inheritance it displays the right name:

functionCar(){
  //re use parent constructorVehicle.call(this);
  //extend whoAmithis.whoAmI = this.whoAmI + ' and a Car';
}

functionVehicle() {
  //re use parent constructorMachine.call(this);
  //extend whoAmithis.whoAmI = this.whoAmI + ' and a Vehicle';
}

functionMachine() {
    this.whoAmI = 'I am a machine';
}

Vehicle.prototype = Object.create(Machine.prototype);
Vehicle.prototype.constructor = Vehicle;

Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

var myCar = newCar();
console.dir(myCar);

Maybe the following answer can help understanding the role of prototype and constructor functions (or init) when creating instances of a certain type:

Solution 2:

Shortish answer if I understand your question: It's not actually a self reference. When you define a function, the prototype property on it gets initialized to a new object with a constructor property that points to the function being defined. You are overriding this prototype object on your Vehicle and Car functions, but not the Machine function. For reasons I don't know, Chrome names the type of the default prototype property of a function the same as the name of the function. IE refers to it as [object (Machine)] and Firefox just refers to it just as Object.

So to recap: myCar has __proto__ set to Car.prototype, which is a Vehicle instance that has it's __proto__ set to Vehicle.prototype, which is a Machine instance (with a whoAmI property) that has it's __proto__ set to Machine.prototype, which is an object, with a constructor property, that Chrome (unfortunately? there must be a reason...) refers to with the same name as the function pointed to by the constructor property.

That is why there is that extra "Machine" object in there, but I can't tell you why Chrome calls it what it does.