The prototype is a property on a constructor function that sets what will become the __proto__ property on the constructed object. 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 , and in Javascript. Most of the content here is collected from the two very great articles by and : prototype __proto__ 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 : vs __proto__ vs prototype [[prototype]] and 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 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 . The chain of objects connected by the property is called the _[[Prototype]]_ _[[Prototype]]_ prototype chain: http://speakingjs.com/es5/ch17.html To see how prototype-based (or ) inheritance works, let’s look at an example (with invented syntax for specifying the property): prototypal [[Prototype]] var > obj.describe[Function] > obj.describe()'name: obj' The is an of the object. It exposes the internal prototype linkage ( of an object through which it is accessed ( ). __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 http://www.javascripttutorial.net/javascript-prototype/ JavaScript engine adds the method to the object, not the object. say() b Foo.prototype As you see in the diagram, the exposes the that points to the object. Similarly, also points to the same object as a.__proto__ [[Prototype]] Foo.prototype b.__proto__ a.__proto__: Example 1 : creating object by constructor This is a example from y, about creating objects by constructor, it is going to show how an and works in inheritance mechanism. Dmitr prototype __proto__ Besides creation of objects by specified pattern, a function does another useful thing — it for newly created objects. This prototype object is stored in the property. constructor automatically sets a prototype object _ConstructorFunction.prototype_ E.g., we may rewrite previous example with object using a constructor function. Thus, the role of the object (a prototype) plays: _b_ _a_ _Foo.prototype_ Create Foo object with prototype and x calculate() 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); 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/ Example 2 : JavaScript Classical Inheritance diagram This is an example from , 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 y). 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 And now we can see from the diagram why when we inherit from , we would do: Dog Animal function Dog() {} // the usual constructor function Dog.prototype = new Animal(); Dog.prototype.constructor = Dog; What happens when new( ) an instance: Note that the in is not to form a prototype chain. to some where in a prototype chain, but this property of Foo is not to form the prototype chain. What constitute a prototype chain are the pointing up the chain, and the objects pointed to by , such as going from , going up to , and so forth, until is reached. prototype Foo.prototype Foo.prototype points prototype __proto__ __proto__ foo.__proto__ foo.__proto__.__proto__ null Relation of __proto__ and prototype 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 is called, I will let point to my prototype object. So and are two different concepts. indicates that, when an object of is created, this is the point where the prototype chain of the new object should point to — that is, should point to where is pointing at. foo = new Foo() foo.__proto__ Foo.prototype obj.__proto__ Foo.prototype Foo foo.__proto__ Foo.prototype What if a function is needed to add If the object doesn’t have the method, it will go up the prototype chain, just like any prototypal inheritance scenario, first to the object pointed to by , which is the same as the object that refers to. If the method is not a property of that object (meaning that the class doesn’t have a method ), go up one level in the prototype chain, which is , or the same as . woofie move woofie.__proto__ Dog.prototype move Dog move woofie.__proto__.__proto__ Animal.prototype Animal.prototype.move = function() { ... }; https://kenneth-kin-lum.blogspot.tw/2012/10/javascripts-pseudo-classical.html?showComment=1484288337339#c1393503225616140233 Even though , the property is not ’s own property. It is actually obtained by going up the prototype chain, to where is pointing at. The same is for . The diagram can be complicated, and sometimes confusing when we see , , . foo.constructor === Foo constructor foo foo.__proto__ Function.constructor Constructor.prototype foo.__proto__ Foo.prototype.constructor To verify the diagram, note that even though will show a value, the property is not ’s own property, but is obtained by following up the prototype chain, as can tell. foo.constructor constructor foo foo.hasOwnProperty(“constructor”) Notes: An object specifies its prototype via the internal property **[[Prototype]]** brings direct access to to the language(by ). **__proto__** [[Prototype]] speakingjs.com is the that is used to build when you create an object with **prototype** object __proto__ new. is not available on the instances themselves (or other objects), but only on the constructor functions. **prototype** is only available on functions since they are copied from and but in anything else it is not. However, is available everywhere. **prototype** Function Object, **__proto__** ( new Foo ).__proto__ === Foo.prototype  //true( new Foo ).prototype === undefined      //true and delegate prototypes concatenative inheritance Cat.prototype = new Animal();

Cat.prototype = Animal.prototype// do not exist on the prototype. The is only used when a instance 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 Reference: http://speakingjs.com/es5/index.html http://www.javascripttutorial.net/javascript-prototype/ http://stackoverflow.com/questions/9959727/proto-vs-prototype-in-javascript http://dmitrysoshnikov.com/ecmascript/javascript-the-core/ https://www.quora.com/What-is-the-difference-between-__proto__-and-prototype http://www.jisaacks.com/prototype-vs-proto/ http://kenneth-kin-lum.blogspot.tw/2012/10/javascripts-pseudo-classical.html

Too Long; Didn't Read

Making security fun one episode at a time

Javascript inheritance behind the scene proto, [[prototype]] and prototype

Too Long; Didn't Read

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Javascript inheritance behind the scene __proto__, [[prototype]] and prototype

Too Long; Didn't Read

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES

Javascript inheritance behind the scene proto, [[prototype]] and prototype