What is the relationship between the property and prototype of a JavaScript object in more detail_javascript skills

ECMAScript can recognize two types of objects, one is called Native Object and belongs to the language category; the other is called Host Object, which is provided by the running environment such as document objects,
Dom Node, etc.
Native objects are a loose structure and Properties can be added dynamically. All properties have a name and a value. This value can be a reference to another object
or a built-in data type (String, Number, Boolean, Null or Undefined)
The following simple example describes how a JavaScript object sets the value of a property and how to read the value of the property.

Assignment operation
Creating the attributes of an object is very simple. The creation of attributes can be completed directly through the assignment operation.
Code

1. var objectRef = new Object(); //create a generic javascript object.


A property named testNumber can be created like this.
Code

1. objectRef.testNumber = 5;
2. /* - or:- */
3. objectRef["testNumber"] = 5;


If the copied attribute name already exists, the attribute will not be created again. The assignment operation only resets the value of the attribute
Code

1. objectRef.testNumber = 8;
2 . /* - or:- */
3. objectRef["testNumber"] = 8;



The prototype of a js object can itself be an object, or There can be attributes (property), and the assignment operation of js object (prototype) is no different from the creation of ordinary object properties
.

Value operation
In the value operation, property and prototype are different. Let’s look at the simplest property value operation first.
Code

1. /*Assign a value to the attribute of an object. If the object does not have this attribute, then after the assignment operation, the object will have this attribute */
2. objectRef. testNumber = 8;
3. /* Read the value of this attribute */
4. var val = objectRef.testNumber;
5.
6. /* Now val has been assigned just now The value of objectRef is 8*/


prototype revealed

But all objects can have prototypes, and prototypes themselves are also objects, so they can also have prototypes, and the cycle continues like this A prototype chain is formed.
This chain is terminated when it encounters that the prototype of the formation in the chain is null.(The default prototype of Object is null)
Code

1. var objectRef = new Object(); //create a generic javascript object.


Create a new js object, the prototype of this object is Null at this time, so the prototype chain of objectRef only contains one object Object.prototype
We are looking at the following code
Code

1. /* Build MyObject1 Type constructor
2. MyObject1 - type.
3. */
4. function MyObject1(formalParameter){
5. /* Create a property named testNumber for the object.
6. */
7. this.testNumber = formalParameter;
8. }
9.
10. /* Build the constructor of the type MyObject2
11. MyObject2 - type:-
12. */
13. function MyObject2(formalParameter){
14. /* Create a property named testString for the object*/
15. this.testString = formalParameter;
16. }
17.
18. /* The next step will replace the default prototype attribute of MyObject2 with the MyObject1 object*/
19. MyObject2.prototype = new MyObject1(8);
20.  
21. /* Finally we create an object of type MyObject2*/  
22.  
23. var objectRef = new MyObject2("String_Value");  


objectRef This MyObject2 type object has a prototype chain. The first object in the chain is the MyObject1 object. The MyObject1 object also has a prototype.
This prototype is the default prototype of Object. The prototype of Object.prototype is null. So far this prototype The chain ends.
When a value operation occurs, the entire prototype chain of objectRef starts to work
Code

1. var val = objectRef.testString;


objectRef object There is an attribute called testString, then this code will assign the value of testString to val
Code

1. var val = objectRef.testNumber;


in objectRef There is no attribute testNumber in the object, but val has reached the value 8 instead of undefine. This is because the interpreter will check the prototype and objectRef of the object after it does not find the attribute it is looking for
in the current object. The prototype is the MyObject1 object. This object has the attribute testNumber, so val gets the value 8.
Code

1. var val = objectRef.toString;


Now val is a reference to a function. This function is a property of Object.prototype, since neither MyObject1 nor MyObject2 has it. Define toString property
so Object.prototype returns.
Code

1. var val = objectRef.madeUpProperty;


The last val is undefined, because MyObject1, MyObject2, and Object have not defined the property madeUpProperty, so we get is undefine.

The read operation will read the first attribute value with the same name found in obj itself and the prototype chain
The write operation will create an attribute with the same name for the obj object itself (if the attribute name is not The existence of
means that objectRef.testNumber = 3 will create a property on the objectRef object with the name testNumber. When the testNumber is to be read next time, the
propertype chain will not work and only the property of objectRef will be obtained. 3. The testNumber property of MyObject1 will not be modified.The following code can be verified
Code

1. /* Construct the constructor of the type MyObject1
2. MyObject1 - type.
3. */
4. function MyObject1( formalParameter){
5. /* Create a property named testNumber for the object 6. */
7. this.testNumber = formalParameter;
8. }
9.
10. /* Construct the constructor of the type MyObject2
11. MyObject2 - type:-
12. */
13. function MyObject2(formalParameter){
14. /* For the object Create a property named testString*/
15. this.testString = formalParameter;
16. }
17.
18. /* The next step will replace the default MyObject2 with the MyObject1 object prototype property*/
19. var obj1 = new MyObject1(8);
20. MyObject2.prototype = obj1;
21.
22. /* Finally we create an object of type MyObject2* /
23. var objectRef = new MyObject2("String_Value");
25.
26. alert(objectRef.testNumber);
27. objectRef.testNumber = 5;
28. alert(objectRef.testNumber);
29. alert(obj1.testNumber);