In-depth analysis on prototype of ctipt PT: Is prototype attributes a copy, a reference, or a fixed search method?

In-depth analysis on prototype of ctictipt:
Is prototype attributes a copy, a reference, or a fixed search method?

//

What is the prototype principle of javasctipt? When an instance is created, it copies the prototype, obtains a copy of the prototype attribute, or enables the instance attribute to reference the prototype attribute value,

Or when an instance is created, there are no properties with the same name as the prototype. Do you only rely on the fixed method of "querying the prototype" to access the prototype?

See the example for analysis:

01 _ modifying prototype attributes

02 _ adding prototype attributes

03 _ add prototype attributes with the same name to the instance

Gorgeous separation line ---------------------------------------------------------------------------------------------------------

In-depth analysis on prototype of ctipt PT: Is prototype attributes a copy, a reference, or a fixed search method? ---- 01 _ modifying prototype attributes//

<SCRIPT type = "text/JavaScript"> var person = function () {}; person. prototype. username = new string ("zhangsan"); var person1 = new person (); var person2 = new person (); alert ("after the instance is created, person1.username:" + person1.username ); alert ("after the instance is created, person2.username:" + person2.username); // modify the property value of the prototype: person. prototype. username = new string ("Lisi"); alert ("after the prototype is modified, person1.username:" + person1.username); alert ("after the prototype is modified, person2.username:" + person2.username ); </SCRIPT>

// Output:

After the instance is created, person1.username: zhangsan
After the instance is created, person2.username: zhangsan

After the prototype is modified, person1.username: Lisi
After the prototype is modified, person2.username: Lisi
 
Q: Why does the attribute values of person1 and person2 of two instances change after the property values of the prototype are modified?
Suppose 1 copy: N instances are created with copies of the prototype attributes. After the prototype attributes are modified, the attribute values of N instances are modified (n times ). in this way, after the prototype property value is changed, the value of the copy on the instance is also modified.
-- It should be impossible to make n modifications!

Suppose 2 references:
N instances are referenced by the prototype property when they are created. At this time, person. prototype. username and person. username references the same object string ("zhangsan"), when the person. prototype. username = new string ("Lisi") after execution, person. prototype. usename references the new object string ("Lisi"), and then modifies the username attribute of N instances so that its username references the same object: string ("Lisi ").
After the prototype property references the new object, the instance property also references the same new object.
-- N modifications are required, which is unlikely.
 

Suppose 3 fixed search methods:
N instances are not created with the same prototype name. For example, when a person is created, it does not have the username attribute! When accessing person. when username is used, because it does not have the username attribute, you can search for it in a fixed way: Because person is an instance of person (person instanceof person gets true), you can find person. if the prototype attribute is not found, continue to the previous prototype search. Here, the JS engine finds the person. prototype. username attribute, so output!
Because of this search method, when the prototype property value person. Prototype. username is modified, no additional operations are required!
Therefore, after the property value of the prototype is changed to "Lisi", the property value of the prototype found by person1.username is also the property value of the prototype!
-- You only need to modify prototype and search by fixed search method. This example can be interpreted!

Gorgeous separation line -----------------------------------------------------------------------------------------------------

In-depth analysis on prototype of ctipt PT: Is prototype attributes a copy, a reference, or a fixed search method? ---- 02 _ add prototype attributes

//

<SCRIPT type = "text/JavaScript"> var person = function () {}; person. prototype. username = "zhangsan"; var person1 = new person (); var person2 = new person (); alert ("after the instance is created, person1.username:" + person1.username ); alert ("after the instance is created, person2.username:" + person2.username); alert ("before adding attribute age to the prototype, person1.age:" + person1.age ); alert ("before adding property age to the prototype, person2.age:" + person2.age); // Add property person to the prototype. prototype. age = new string ("18"); alert ("after adding attribute age to the prototype, person1.age:" + person1.age); alert ("after adding attribute age to the prototype, person2.age: "+ person2.age); </SCRIPT>

//

Output:

After the instance is created, person1.username: zhangsan
After the instance is created, person2.username: zhangsan
 
Before adding the property age to the prototype, person1.age: Undefined
Before adding the property age to the prototype, person2.age: Undefined

After adding the property age to the prototype, person1.age: 18
After adding the property age to the prototype, person2.age: 18

Q: Why do two instances, person1 and person2, add the corresponding attributes after adding attributes to the prototype?

Assume 1 copy: N instances are created with copies of the prototype attributes. After the age attribute is added to the prototype, the age attribute is added to N instances, and the value is the same as that of the prototype (copy)

-- N operations are required, which is unlikely!

Suppose 2 reference: N instances are created with the reference of the prototype property, add the age property to the prototype, and then add the age property (reference) to N instances. At this time, person. prototype. age and person. age references the same object string ("18 ")

-- N operations are required, which is unlikely!

Suppose 3 fixed search methods:

N instances are not created with the same prototype name. For example, when a person is created, it does not have the username attribute! After the age attribute is added to the prototype, N instances do not have the age attribute. when accessing person1.age, because it does not have the age attribute, you can search for it in a fixed way:

Because person1 is an instance of person (person1 instanceof person gets true), find person. prototype. if the property of age is not found, continue to the previous prototype search. Here, the JS engine finds the person. prototype. age attribute, so output!

-- You only need to modify prototype and search by fixed search method. This example can be interpreted!

The gorgeous separation line --------------------------------------------------------------


In-depth analysis on prototype of ctipt PT: Is prototype attributes a copy, a reference, or a fixed search method? ---- 03 _ add the Same Name attribute of prototype to the instance

//

<SCRIPT type = "text/JavaScript"> var person = function () {}; person. prototype. username = new string ("zhangsan"); var person = new person (); alert ("person. username: "+ person. username); // Add the person property with the same name as prototype to the instance. username = new string ("Lisi"); alert ("after adding an attribute with the same name as prototype to the instance, person. username: "+ person. username); // Delete the username attribute on the instance and then access the [instance]. will the username be undefined? Delete person. Username; alert ("after deleting the username attribute on the instance, person. Username:" + person. username); </SCRIPT>

//

Output:

After the instance is created, person. Username: zhangsan
 
After adding an attribute with the same name as prototype to the instance, person. Username: Lisi

After deleting the username attribute on the instance, person. Username: zhangsan

Problem: After adding an attribute with the same name as prototype to an instance (Person. Username = new string ("Lisi ")), And then delete this attribute, and then access person. Username again. Why is the returned value of this attribute the same as that of the prototype instead of undefined?

Assume 1 copy:

When the person instance is created, it holds a copy of the prototype property, and then changes the username of the instance to string ("Lisi"). After deleting the property of person. username
At the same time, the copy username = new string ("zhangsan") of the prototype attribute is added to the instance. Therefore, the value of the person. Username accessed again is "zhangsan "..

-- Delete the username attribute of person and add the username attribute of the copy of string ("zhangsan") to person. Obviously, it is impossible!

Suppose 2 references:

When the person instance is created, the reference of the prototype property is held. At this time, both person. Prototype. username and person. Username reference the same object string ("zhangsan"), person. Username
= New string ("Lisi") after execution, person. username refers to the new object string ("Lisi"), when the person. after the username attribute, the person. username re-reference person. prototype. username refers to the object string ("zhangsan ")!

-- After deleting the username of person, it is obviously impossible to add the username attribute that references string ("zhangsan") to person at the same time!

Suppose 3 fixed search methods:

When a person instance is created, there is no username attribute with the same name as the prototype. username = new string ("Lisi") indicates adding the username attribute with the same name as the prototype to the person instance. It references the new object string ("Lisi"). At this time, the person. prototype. username references the object string ("zhangsan"), while person. username references string ("Lisi. when username is used, because person has the username attribute, Lisi is output directly. When Delete
Person. username And then access person. username, because it does not have the username attribute, so follow a fixed search method: Because person is an instance of person (person instanceof person gets true), so find person. if the prototype attribute is not found, continue to the previous prototype search. Here, the JS engine finds the person. prototype. username attribute, so output!

-- When the person. Username attribute exists, it will "Block" the prototype's username attribute. After the person. username is deleted, the prototype's username "Block" is removed, which is reasonable!

Gorgeous separation line -----------------------------------------------------------------------------------------------------

Conclusion: from its ownMethod of searching up the prototype chain

The following method is used to search up the prototype chain:

When accessing the properties of object. xxx, if the object does not have the xxx property, the prototype chain is extended and the output is undefined.

PS: because each object and prototype has a prototype (Note: The prototype is also an object.), The prototype of the object points to the parent of the object, and the prototype of the parent points to the parent of the parent. We hold the prototype link connected by the prototype layer as the prototype chain. The end of a chain is usually the default object prototype.

, VAR person = new person (), the obtained person instance has this relationship with the prototype person. Prototype. Initially, the person does not have the attributes of username or age! When person. username is executed, because there is no username attribute, you can obtain it by searching for the prototype attribute!

The figure shows that the prototype's. xxx attribute and instance. xxx attribute are two different variables, but they have the same name!

Execute person. after username = new string ("Lisi"), the person gets the username attribute. Since the person gets the username attribute, it is unnecessary to search for the prototype. In this case, alert (person. username) the output is Lisi, while alert (person. age) to search for the prototype, the output is 18 ....

The real charm of the prototype lies in the fact that multiple instances share a common prototype. Once defined, the attributes of a prototype object (Note: The object referenced by the prototype of an object) can be inherited by multiple instances that reference it (note: that is, the prototype of these instance objects points to this prototype object.) This operation is self-evident in terms of performance and maintenance!

-----------------------------------------

PS: Next, let's take a look at what is prototype chain?
<Deep analysis of prototype chain>