The difference between __proto__, property, prototype, object's own attribute method and attribute method in the prototype in JS

Source: Internet
Author: User

__PROTO__: This property is a property of an instance object, each of which has a __proto__ property that points to the prototype object (prototype) of the constructor that instantiates the instance.

Proterty: This method is the property of the object. (it is said to be similar to an object's attr, such as in a DOM object)

Prototype: Each constructor has a prototype object that points to the prototype of the constructor.

The difference between an object's own property method and a property method in a prototype: the properties and methods of the object itself are valid only for that object, and the property methods in the prototype chain are valid for all instances.

Example:

function BaseClass () {
This.age = 12;//The Age property inside the constructor method
This.showmsg = function () {//ShowMsg method inside the constructor method
Console.log ("baseclass::showmsg");
}
}
BaseClass.prototype.say = function () {//Say method defined on prototype
Console.log (' Test ');
}
baseClass.prototype.age = name attribute defined on 23;//prototype

function Extendclass () {};//extendclass New construction method
var B = new BaseClass ();//Instantiate a BaseClass
Console.log (b,121212); The B object contains the properties and methods in the BaseClass constructor, does not contain properties and methods on the BaseClass prototype, and the properties and methods in the prototype are shared by all instances.
The properties and methods in the prototype can be obtained from the prototype chain when the properties and methods in the prototype are called in the instantiated object, without being isolated to the instantiated object itself (the object does not have the same name
Properties and methods, otherwise the properties and methods of the instance itself

Extendclass.prototype = b;//The prototype of Extendclass to the instantiated B, that is, the Extendclass prototype has all the properties and methods of the B object

var instance = new Extendclass ();//Instantiate a Extendclass instance instance
At this time instance should be an empty object, but after the assignment, here also has the value (do not know why, according to the Truth JS is sequential execution), the instance.__proto__ attribute points to the Extendclass prototype object, and
Extendclass.prototype equals an instance of the BaseClass constructor, so the last instance.__proto__ attribute points to the BaseClass constructor, Instance.__proto__.__proto_ _ Points to the
The original prototype object
Instance.showmsg (); Show Baseclass::showmsg
Instance.name = ' branchname ';//instance instance's Name property
Instance.age = 34;//instance Instance's Age property
         var instance2 = new Extendclass ();//Instantiate another Extendclass object Instance2
Instance.say ();//say method is the method of the original prototype object
BaseClass.prototype.name = ' Xiugai ';//Modify the Name property of the original prototype object, modify the property to affect all instantiation formations (in case the instantiation object itself does not have this property)
Console.log (instance.name,instance.age);//name takes the name value of the Instanace object itself ' Branchname ', the same age
Console.log (instance2.name,instance2.age);//instance takes the name value above the prototype object BaseClass the construction method ' Xiugai ', age takes the same baseclass on the prototype object
Age with a value of ' 12 '

Console.log (instance2.name);//This time name becomes ' Zaicixiugai '
var instance3 = new Extendclass ();
Console.log (INSTANCE3);//instance3 is an empty object whose prototype chain eventually points to the BaseClass prototype object

When assigning a value to the prototype of a constructor, it cannot be used directly.

Object.prototype = {} assigned value,

If this assignment is to add a row to the constructor property, it will overwrite the prototype of the object itself.

JS __proto__, property, prototype, the difference between the object's own attribute methods and the property methods in the prototype

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.