[JS Master's Road] step-by-step graphical JavaScript prototype (prototype) object, prototype chain

We proceed as above, we have solved the method sharing problem of multiple instances by prototyping, then we will figure out the prototype of the prototype and the context of the prototype chain.

1         functionCreateobj (uName) {2              This. UserName =UName;3         }4CreateObj.prototype.showUserName =function(){5             return  This. UserName;6         }7         varObj1 =NewCreateobj (' Ghostwu ');8         varObj2 =NewCreateobj (' Wei Zhuang ');

1, each function has a prototype attribute (prototype), which is a pointer to the constructor's prototype object (Createobj.prototype), such as the 1th Green Line in the

2, by default, all prototype objects automatically get a constructor property that has been explained above, which contains a function that points to the prototype property, such as the 2nd Green Line

3, all instances (through the constructor new, prototype objects [such as Createobj.prototype, I have not drawn], etc.) all contain an implicit prototype (__proto__), which points to the prototype object of the instance's constructor,

such as the 3rd and 4th lines in the. Obj1 's constructor is Createobj, Createobj's prototype object is Createobj.prototype, obj2 the same, so:

obj1.__proto__ = = = Createobj.prototype//true

obj2.__proto__ = = = Createobj.prototype//true

4, written in the constructor, for this assignment of properties and methods, in the process of drawing, they are drawn on the object, such as username this is a property assigned to the object, so there is a property on both Obj1 and Obj2 objects username

5, methods or properties written on the prototype object, should be drawn on the prototype object, such as

CreateObj.prototype.showUserName = function () {return this.username;} Showusername This method is to be drawn in the figure Createobj.prototype above 6, when an object accesses properties and methods, his access rules are called (nearest principle), the rules are as follows: When the instance above, the existence of attributes or methods, directly using the instance above, If no properties and methods exist above the instance, the prototype object pointed to by the instance's __proto__ pointer continues to look up, and if not found, the value is Undefined.console.log (Obj1.showusername ()); Ghostwuconsole.log (Obj2.showusername ()); Weizhuang There is no showusername this method on the obj1,obj2, so it will follow the __proto__ Find the Showusername method on the Createobj.prototype prototype object if the Showusername on the Createobj.prototype prototype object is commented out, then Obj1.showusername and Obj2.showusern AME will error//CreateObj.prototype.showUserName = function () {//Return this.username;//}

1         functionCreateobj (uName) {2              This. UserName =UName;3              This. Showusername =function(){4                 return' 100 ';5             }6         }7CreateObj.prototype.showUserName =function(){8             return  This. UserName;9         }Ten  One         varObj1 =NewCreateobj (' Ghostwu '); A         varObj2 =NewCreateobj (' Wei Zhuang ')); -  -Console.log (Obj1.showusername ());// - theConsole.log (Obj2.showusername ());// -

If you add a Showusername method to this in the constructor, then obj1 and Obj2 call this directly above, because the two methods will be drawn on the instance in the diagram, so:

Console.log (Obj1.showusername = = = Obj2.showusername); False now, you should be able to understand that the properties and methods written on the constructor of the prototype object (prototype), you can implement the principle of multiple instance properties and methods of sharing the prototype chain, that is, createobj.prototype the back part, please listen to tell!

[JS Master's Road] step-by-step graphical JavaScript prototype (prototype) object, prototype chain