[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.

function Createobj (uName) {this.username = UName;        } CreateObj.prototype.showUserName = function () {return this.username;        } var obj1 = new Createobj (' Ghostwu '); var obj2 = new Createobj (' Wei Zhuang ');

650) this.width=650; "Src=" http://images2017.cnblogs.com/blog/253192/201708/253192-20170826104848402-2061136516. PNG "width=" 626 "height=" 457 "alt=" 253192-20170826104848402-2061136516.png "/>

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 will be drawn on the createobj.prototype above

6, when an object accesses properties and methods, his access rules are called (nearest principle) and the rules are as follows:

When a property or method is present on the instance, it is used directly above the instance,

If no properties and methods exist above the instance, the prototype object pointed to by the instance's __proto__ pointer continues to be looked up, and if not found, the value is undefined.

Console.log (Obj1.showusername ()); Ghostwu

Console.log (Obj2.showusername ()); Weizhuang

There is no showusername this method on Obj1,obj2, so the Showusername method on Createobj.prototype prototype object will be found along the __proto__.

If the showusername on the Createobj.prototype prototype object is commented out, then Obj1.showusername and Obj2.showusername will give an error.

CreateObj.prototype.showUserName = function () {

return this.username;

// }

Function createobj (UName)  {             this.username = uname;             This.showusername = function () {                 return  ';           '   }        }         Createobj.prototype.showusername = function () {             return this.userName;        }         var obj1 = new createobj (' Ghostwu ');         var obj2 = new createobj (' Wei Zhuang ');         console.Log ( obj1.showusername ()  );  //100        console.log (  obj2.showusername ()  );  //100

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 by writing properties and methods on the prototype object (prototype) of the constructor, it is possible to implement the sharing principle of multiple instance properties and methods.

What is a prototype chain?

In the preceding, I have said that all instances (including prototype objects) have an implicit prototype __proto__, then createobj.prototype this prototype object, his __proto__ point to whom?

Function createobj (UName)  {             this.username = uname;             this.showusername = function  ()  {                 return  ';         '     }        }         CreateObj.prototype.showUserName = function  ()  {             return this.userName;         }        console.log ( CreateObj.prototype.__proto__ );  //Point Object.prototype        console.log (  Createobj.prototype.__proto__ === object.prototype );  //true 

650) this.width=650; "Src=" http://images2017.cnblogs.com/blog/253192/201708/253192-20170826145856183-1187328329. PNG "width=" 989 "height=" 457 "alt=" 253192-20170826145856183-1187328329.png "/>

createobj.prototype.__proto__ points to Object.prototype, which is true after testing by the congruent operator (= = =)

OBJECT.PROTOTYPE.__PROTO__ is pointing to null

This is the prototype chain, through the implicit prototype of some of the structure layer of the string up, through the above diagram, we know, why the custom object can call ToString, valueOf, and so on?

This article is from the "GHOSTWU" blog, make sure to keep this source http://ghostwu.blog.51cto.com/11192807/1960232

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