JavaScript — Prototype – codeburst

  • prototype, [[Protoytype]], __proto__)/* Code 2 */function Car(name) { this.name = name;}Car.prototype.start = function() { return “engine of “+this.name + ” starting…”;};var c1 = new Car(“Santa Fe”);var c2 = new Car(“Fiesta”);c2.speak = function() { console.log(“Hello, ” + this.start());};c2.speak(); //”Hello, engine of Fiesta starting…”Let’s try to understand the above code with diagrammatic…
  • Both object is having name property and c2 is having an additional method speak() as well.But the important thing happens during the code execution is c1 and c2 gets linked with Car.prototype with internal linkage called [[Prototype]].
  • Understanding __proto__/* Code 3 */function Car(name) { this.name = name;}Car.prototype.start = function() { return “engine of “+this.name + ” starting…”;};var c1 = new Car(“Santa Fe”);var c2 = new Car(“Fiesta”);c2.speak = function() { console.log(“Hello, ” + === Car.prototype); // trueconsole.log(c1.
  • As per above prototype chain diagram, we can see object c1 does not have __proto__ property so it goes through [[Prototype]] chain to Car.prototype object but __proto__ property is not available there as well.
  • __proto__ is an public property of Object.prototype to access the [[Prototype]] is a method to access the __proto__ property.Constructor is a function, called with new keyword in front of it but .

In the below code snippet, we can see that bikeFunc() is having a prototype property inbuilt and similarly by default, object bike is having __proto__ property. In the above diagram, the right side…

about .prototype, [[Prototype]] and __proto__ in javascript.learn on the flyWhat is PrototypeA Prototype is an object that exists as a property on every function in Javascript.Objects does not have prototype property. It has __proto__ property.In the below code snippet, we can see that bikeFunc() is having a prototype property inbuilt and similarly by default, object bike is having __proto__ property./* Code 1 */var bikeFunc = //[object Object] { … }var bike = {name: //[object Object] { … }Every single object is built by a constructor function.When we call a function with new keyword it creates a brand new object.Each time a constructor is called, a new object is created be it calling directly or indirectly the constructor.A constructor makes an object linked to its own prototype.Detail explanation of new and this keyword is present in my article All about this and new keyword in javascript.Prototype chain (.prototype, [[Protoytype]], __proto__)/* Code 2 */function Car(name) { this.name = name;}Car.prototype.start = function() { return “engine of “+this.name + ” starting…”;};var c1 = new Car(“Santa Fe”);var c2 = new Car(“Fiesta”);c2.speak = function() { console.log(“Hello, ” + this.start());};c2.speak(); //”Hello, engine of Fiesta starting…”Let’s try to understand the above code with diagrammatic presentation.prototype chainIn the above diagram, the right side of dotted line happens by default. In javascript, there is a function called Object and every function is having prototype property. So function named Object is also having prototype property and .toString() , .typeof() etc are part of that prototype object.In the above diagram, boxes are objects and circles are functions….

JavaScript — Prototype – codeburst