The prototype is a property on a constructor function that sets what will become the proto property on the constructed object. The prototype is a property on a constructor function that sets what will become the proto property on the constructed object. proto The key to understanding inheritance in Javascript is to understanding how a Javascript Egg laying process by the parent hen; Javascript inheritance happens in prototype inherited but classical class technically and conceptually is not existed. This is a note about clearing up the confusion of prototype, proto and inheritance in Javascript. Most of the content here is collected from the two very great articles by Dmitry Soshnikov and Kenneth Kin Lum : http://dmitrysoshnikov.com/ecmascript/javascript-the-core/https://kenneth-kin-lum.blogspot.tw/2012/10/javascripts-pseudo-classical.html?showComment=1484288337339#c1393503225616140233 prototype prototype proto proto proto inheritance inheritance Dmitry Soshnikov Kenneth Kin Lum http://dmitrysoshnikov.com/ecmascript/javascript-the-core/ https://kenneth-kin-lum.blogspot.tw/2012/10/javascripts-pseudo-classical.html?showComment=1484288337339#c1393503225616140233 Example 0 : [[prototype]] vs proto vs prototype [[prototype]] [[prototype]] proto speakingjs.com and javascripttutorial.com are the best resource which explains the relation of [[prototype]], proto and prototype from the basic to application, also very important that they visualize the relation in graphic. speakingjs.com javascripttutorial.com proto Every object can have another object as its prototype. Then the former object inherits all of its prototype’s properties. An object specifies its prototype via the internal property _[[Prototype]]_. The chain of objects connected by the _[[Prototype]]_ property is called the prototype chain: Every object can have another object as its prototype. Then the former object inherits all of its prototype’s properties. An object specifies its prototype via the internal property _[[Prototype]]_. The chain of objects connected by the _[[Prototype]]_ property is called the prototype chain: _[[Prototype]]_ _[[Prototype]]_ prototype chain: http://speakingjs.com/es5/ch17.html http://speakingjs.com/es5/ch17.html To see how prototype-based (or prototypal) inheritance works, let’s look at an example (with invented syntax for specifying the [[Prototype]] property): To see how prototype-based (or prototypal) inheritance works, let’s look at an example (with invented syntax for specifying the [[Prototype]] property): prototypal [[Prototype]] var var obj.describe[Function] obj.describe[Function] obj.describe()'name: obj' obj.describe()'name: obj' The __proto__ is an accessor property of the Object.prototype object. It exposes the internal prototype linkage ( [[Prototype]]) of an object through which it is accessed (by javascripttutorial). The __proto__ is an accessor property of the Object.prototype object. It exposes the internal prototype linkage ( [[Prototype]]) of an object through which it is accessed (by javascripttutorial). __proto__ accessor property Object.prototype [[Prototype]]) by javascripttutorial function Foo(name) {this.name = name;} var b = new Foo('b');var a = new Foo('a');b.say = function() {console.log('Hi from ' + this.whoAmI());} console.log(a.proto === Foo.prototype); _// true_console.log(a.proto === b.proto); // true proto proto proto // true http://www.javascripttutorial.net/javascript-prototype/ http://www.javascripttutorial.net/javascript-prototype/ JavaScript engine adds the say() method to the b object, not the Foo.prototype object. JavaScript engine adds the say() method to the b object, not the Foo.prototype object. say() b Foo.prototype As you see in the diagram, the a.__proto__ exposes the [[Prototype]] that points to the Foo.prototype object. Similarly, b.__proto__ also points to the same object as a.__proto__: As you see in the diagram, the a.__proto__ exposes the [[Prototype]] that points to the Foo.prototype object. Similarly, b.__proto__ also points to the same object as a.__proto__: a.__proto__ [[Prototype]] Foo.prototype b.__proto__ a.__proto__: Example 1 : creating object by constructor This is a example from Dmitry, about creating objects by constructor, it is going to show how an prototype and proto works in inheritance mechanism. Dmitr prototype proto proto Besides creation of objects by specified pattern, a constructor function does another useful thing — it automatically sets a prototype object for newly created objects. This prototype object is stored in the _ConstructorFunction.prototype_ property. Besides creation of objects by specified pattern, a constructor function does another useful thing — it automatically sets a prototype object for newly created objects. This prototype object is stored in the _ConstructorFunction.prototype_ property. constructor automatically sets a prototype object _ConstructorFunction.prototype_ E.g., we may rewrite previous example with _b_ object using a constructor function. Thus, the role of the object _a_ (a prototype) _Foo.prototype_ plays: E.g., we may rewrite previous example with _b_ object using a constructor function. Thus, the role of the object _a_ (a prototype) _Foo.prototype_ plays: _b_ _a_ _Foo.prototype_ Create Foo object with prototype x and calculate() x x calculate() calculate() function Foo.prototype.x = 10;Foo.prototype.calculate = function function Foo.prototype.x = 10;Foo.prototype.calculate = function Create instance b using the object Foo: var b.calculate(30); // 60 console.log( b.__proto__ === Foo.prototype, // true b.__proto__.calculate === Foo.prototype.calculate // true b.__proto__.calculate === b.calculate, // true Foo === b.constructor, // true Foo === Foo.prototype.constructor, // true); var b.calculate(30); // 60 console.log( b.__proto__ === Foo.prototype, // true b.__proto__.calculate === Foo.prototype.calculate // true b.__proto__.calculate === b.calculate, // true Foo === b.constructor, // true Foo === Foo.prototype.constructor, // true); As it is showed above, b is inherited the methods from Foo(). “Foo.prototype” automatically creates a special property “constructor”, which is a reference to the constructor function itself.Instances “b” may found it via delegation and use to check their constructor. As it is showed above, b is inherited the methods from Foo(). “Foo.prototype” automatically creates a special property “constructor”, which is a reference to the constructor function itself.Instances “b” may found it via delegation and use to check their constructor. from: http://dmitrysoshnikov.com/ecmascript/javascript-the-core/ http://dmitrysoshnikov.com/ecmascript/javascript-the-core/ Example 2 : JavaScript Classical Inheritance diagram This is an example from Kenneth, also about creating object by constructor but we are focus on the issue of prototype chain during those series of objects and instances. Prototype objects are also just simple objects and may have their own prototypes. If a prototype has a non-null reference to its prototype, and so on, this is called the prototype chain (by Dmitry). Kenneth Dmitr The following is a chart of JavaScript Pseudo Classical Inheritance. The constructor Foo is just a class name for an imaginary class. The foo object is an instance of Foo. https://kenneth-kin-lum.blogspot.tw/2012/10/javascripts-pseudo-classical.html?showComment=1484288337339#c1393503225616140233 https://kenneth-kin-lum.blogspot.tw/2012/10/javascripts-pseudo-classical.html?showComment=1484288337339#c1393503225616140233 And now we can see from the diagram why when we inherit Dog from Animal, we would do: Dog Animal function Dog() {} // the usual constructor functionDog.prototype = new Animal();Dog.prototype.constructor = Dog; function Dog() {} // the usual constructor functionDog.prototype = new Animal();Dog.prototype.constructor = Dog; What happens when new( ) an instance: Note that the prototype in Foo.prototype is not to form a prototype chain. Foo.prototype points to some where in a prototype chain, but this prototype property of Foo is not to form the prototype chain. What constitute a prototype chain are the proto pointing up the chain, and the objects pointed to by proto, such as going from foo.proto, going up to foo.proto.proto, and so forth, until null is reached. Note that the prototype in Foo.prototype is not to form a prototype chain. Foo.prototype points to some where in a prototype chain, but this prototype property of Foo is not to form the prototype chain. What constitute a prototype chain are the proto pointing up the chain, and the objects pointed to by proto, such as going from foo.proto, going up to foo.proto.proto, and so forth, until null is reached. prototype Foo.prototype Foo.prototype points prototype proto proto proto proto foo.proto proto foo.proto.proto proto proto null Relation of proto and prototype proto JavaScript’s Pseudo Classical Inheritance works like this way: I am a constructor, and I am just a function, and I hold a prototype reference, and whenever foo = new Foo() is called, I will let foo.proto point to my prototype object. So Foo.prototype and obj.proto are two different concepts. Foo.prototype indicates that, when an object of Foois created, this is the point where the prototype chain of the new object should point to — that is, foo.proto should point to where Foo.prototype is pointing at. JavaScript’s Pseudo Classical Inheritance works like this way: I am a constructor, and I am just a function, and I hold a prototype reference, and whenever foo = new Foo() is called, I will let foo.proto point to my prototype object. So Foo.prototype and obj.proto are two different concepts. Foo.prototype indicates that, when an object of Foois created, this is the point where the prototype chain of the new object should point to — that is, foo.proto should point to where Foo.prototype is pointing at. foo = new Foo() foo.proto proto Foo.prototype obj.proto proto Foo.prototype Foo foo.proto proto Foo.prototype What if a function is needed to add If woofie the object doesn’t have the move method, it will go up the prototype chain, just like any prototypal inheritance scenario, first to the object pointed to by woofie.proto, which is the same as the object that Dog.prototype refers to. If the method move is not a property of that object (meaning that the Dog class doesn’t have a method move), go up one level in the prototype chain, which is woofie.proto.proto, or the same as Animal.prototype. If woofie the object doesn’t have the move method, it will go up the prototype chain, just like any prototypal inheritance scenario, first to the object pointed to by woofie.proto, which is the same as the object that Dog.prototype refers to. If the method move is not a property of that object (meaning that the Dog class doesn’t have a method move), go up one level in the prototype chain, which is woofie.proto.proto, or the same as Animal.prototype. woofie move woofie.proto proto Dog.prototype move Dog move woofie.proto.proto proto proto Animal.prototype Animal.prototype.move = function() { ... }; Animal.prototype.move = function() { ... }; https://kenneth-kin-lum.blogspot.tw/2012/10/javascripts-pseudo-classical.html?showComment=1484288337339#c1393503225616140233 https://kenneth-kin-lum.blogspot.tw/2012/10/javascripts-pseudo-classical.html?showComment=1484288337339#c1393503225616140233 Even though foo.constructor === Foo, the constructor property is not foo’s own property. It is actually obtained by going up the prototype chain, to where foo.proto is pointing at. The same is for Function.constructor. The diagram can be complicated, and sometimes confusing when we see Constructor.prototype, foo.proto, Foo.prototype.constructor. Even though foo.constructor === Foo, the constructor property is not foo’s own property. It is actually obtained by going up the prototype chain, to where foo.proto is pointing at. The same is for Function.constructor. The diagram can be complicated, and sometimes confusing when we see Constructor.prototype, foo.proto, Foo.prototype.constructor. foo.constructor === Foo constructor foo foo.proto proto Function.constructor Constructor.prototype foo.proto proto Foo.prototype.constructor To verify the diagram, note that even though foo.constructor will show a value, the property constructor is not foo’s own property, but is obtained by following up the prototype chain, as foo.hasOwnProperty(“constructor”) can tell. To verify the diagram, note that even though foo.constructor will show a value, the property constructor is not foo’s own property, but is obtained by following up the prototype chain, as foo.hasOwnProperty(“constructor”) can tell. foo.constructor constructor foo foo.hasOwnProperty(“constructor”) Notes: **[[Prototype]]**An object specifies its prototype via the internal property **[[Prototype]]** **__proto__** brings direct access to [[Prototype]] to the language(by speakingjs.com). **__proto__** [[Prototype]] speakingjs.com **prototype** is the object that is used to build __proto__ when you create an object with new. **prototype** object object __proto__ new. **prototype** is not available on the instances themselves (or other objects), but only on the constructor functions. **prototype** **prototype** is only available on functions since they are copied from Function and Object, but in anything else it is not. However, **__proto__** is available everywhere. **prototype** Function Object, **__proto__** ( new Foo ).__proto__ === Foo.prototype //true( new Foo ).prototype === undefined //true ( new Foo ).__proto__ === Foo.prototype //true( new Foo ).prototype === undefined //true delegate prototypes and concatenative inheritance delegate prototypes delegate prototypes concatenative inheritance concatenative inheritance Cat.prototype = new Animal(); Cat.prototype = Animal.prototype// Cat.prototype = new Animal(); Cat.prototype = Animal.prototype// static properties/functions do not exist on the prototype. The prototype is only used when a newinstance is created. static properties/functions prototype new Like this story? It is helpful to others? It helps me know if you’d like to see write more about his topic and helps people see the story, when tap the heart below. when tap the heart below when tap the heart below Reference: http://speakingjs.com/es5/index.html http://speakingjs.com/es5/index.html http://www.javascripttutorial.net/javascript-prototype/ http://www.javascripttutorial.net/javascript-prototype/ http://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript http://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript http://dmitrysoshnikov.com/ecmascript/javascript-the-core/ http://dmitrysoshnikov.com/ecmascript/javascript-the-core/ https://www.quora.com/What-is-the-difference-between-__proto__-and-prototype https://www.quora.com/What-is-the-difference-between-__proto__-and-prototype http://www.jisaacks.com/prototype-vs-proto/ http://www.jisaacks.com/prototype-vs-proto/ http://kenneth-kin-lum.blogspot.tw/2012/10/javascripts-pseudo-classical.html http://kenneth-kin-lum.blogspot.tw/2012/10/javascripts-pseudo-classical.html
![featured image - Javascript inheritance behind the scene __proto__, [[prototype]] and prototype](https://hackernoon.imgix.net/images/Rd8z9ArVMycSceC003hxVrAXoj23-vm03bmh.jpeg?auto=format&fit=max&w=3840)
