Understanding the prototype in JavaScript

Understanding the prototype in JavaScript

After learning JavaScript For a while, I feel that the prototype is a bit messy. Now I want to take a note and sort out my thoughts.

What is prototype?

Each time a function is created, the prototype property of this function points to a prototype object. At first, this prototype object contains only one constructor, which is a pointer to the function we created. That is to say, the function and the prototype object can find each other through the prototype and constructor attributes (pointers.

We can use fn. prototype. propertyName = value to add attributes and methods to the prototype object. These attributes and methods are different from the instance attributes and Methods written in functions. Why is there such a difference or how is it done? To see what happened after an instance is created. The following code is used to describe:

function Person(name,age){    this.name=name,    this.age=age;}Person.prototype.hobby = [running,swimming,tennis];Person.prototype.country=China;Person.prototype.showName=function(){alert(this.name);};var person1 = new Person(anna,10);

Here we have created an instance person1. We know that the instance created using the new method will replace this in the original Person with the newly created instance person1, that is, in this way, we have added the attribute name and age for the object person1. These are the attributes owned by person1, which are independent of other Person instances and are called instance attributes.
At the same time, each time an instance is created, this instance comes with an internal attribute [prototype], which is a reference to the prototype object pointing to the constructor. That is to say, the person1 object now includes three attributes:

person1={   prototype:Person.prototype,   name:anna,   age:10}

Generally, this internal attribute cannot be accessed through a script. What is its use? InSearch for property identifiersIt will be used.
When the engine reads an object attribute, it first finds whether the attribute exists in the instance attribute. If yes, it stops. If no, it finds the associated prototype through the internal attribute [prototype, check whether the prototype has the corresponding attributes.

The instance and prototype attributes have the same name.

Note that if we add an attribute with the same name as the prototype object to the instance, or we "Override" the attribute in the prototype, what will happen. Whether the score attribute is of the original value type or reference type.

Original Type

Instance attributes with the same name will block the attributes with the same name in the prototype object.The blocking here means that this property is changed to the instance property of the Instance itself, and has no relationship with the property half-cent in the prototype object,It does not "Override" attributes in the prototype object at all.There are two values in the memory. Through hasOwnProperty (), you can see that the attributes of your instance are:

Person1.country = USA; // rewrite the attribute alert (person1.hasOwnProperty (country); // true

You can use delete person1.country to delete instance attributes so that you can access the attributes in the prototype object.

Reference Type

The reference type is different. All instances share the property of this reference type in the prototype object, any instance that modifies the reference type data changes this attribute in the same prototype object, it does not change to its own instance attributes by "Rewriting" like the original value type attributes:

person1.hobby.push(hiking);alert(person1.hasOwnProperty(hobby));//false

It can be seen that hasOwnProperty is used to detect and it is not changed to its own instance attribute after rewriting.

Q: Is this an instance object in the showName method of the prototype object? Who calls this?
Since the time relationship is written here, it will be supplemented later ....