A more detailed relationship between the property and prototype of javascript objects _ javascript skills

What is the relationship between the property and prototype of javascript objects? ECMAScript can recognize two types of objects. One is called Native Object, which belongs to the language category. The other is called Host Object, the runtime environment provides a document object, for example,
Dom Node
Native objects is a loose structure and can dynamically add properties. All attributes have a name and a value. This value can be referenced by another object.
Or the built-in data type (String, Number, Boolean, Null or Undefined)
The following simple example describes how a javascript Object sets an attribute value and reads the attribute value.

Assignment operation
The attribute creation of an object is very simple. You can create attributes directly by assigning values.
Code

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


A property named testNumber can be created in this way.
Code

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


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

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



The prototype of the js object itself can also be an object, or it can have properties. The assignment operation of the prototype of the js object and the creation of common object properties
There is no difference.

Value operation
In the value operation, the property and prototype are different. First, let's look at the simplest property value operation.
Code

1./* assign a value to the attribute of an object. If this object does not have this attribute, the object will have this attribute after the value assignment operation */
2. objectRef. testNumber = 8;
3./* read the value of this attribute */
4. var val = objectRef. testNumber;
5.
6./* Now val gets the value 8 that was just granted to objectRef */


Prototype Encryption

However, all objects can have prototypes, and prototypes can also have prototypes. In this way, a prototype chain is formed after a loop,
This chain is terminated when prototype in the formation in the chain is null. (The default prototype of the 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, so the prototype chain of objectRef contains only one Object. prototype.
We are looking at the following code:
Code

1./* construct a constructor of the MyObject1 type
2. MyObject1-type.
3 .*/
4. function MyObject1 (formalParameter ){
5./* Create an attribute named testNumber for the object
6 .*/
7. this. testNumber = formalParameter;
8 .}
9.
10./* construct a constructor of the MyObject2 type
11. MyObject2-type :-
12 .*/
13. function MyObject2 (formalParameter ){
14./* Create an attribute named testString for the object owner */
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 the MyObject2 type */
22.
23. var objectRef = new MyObject2 ("String_Value ");


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

1. var val = objectRef. testString;


The objectRef object has a property named testString, so this code will assign the value of testString to val
Code

1. var val = objectRef. testNumber;


The object objectRef does not have the attribute testNumber, but val reaches the value of 8 rather than undefine. This is because the interpreter does not find it in the current object.
The object's prototype will be checked. The prototype of objectRef is the MyObject1 object. This object has the property testNumber, so val gets the value 8.
Code

1. var val = objectRef. toString;


Now val is a function reference. This function is the property of Object. prototype, because neither MyObject1 nor MyObject2 defines the property of toString.
Therefore, Object. prototype is returned.
Code

1. var val = objectRef. madeUpProperty;


The final val is undefined. Because neither MyObject1 nor MyObject2, nor the Object has the property madeUpProperty defined, the undefine is obtained.

The read operation reads the first attribute value with the same name found on the obj itself and prototype chain.
The write operation creates an attribute with the same name for the obj object itself (if this attribute name does not exist
This means that objectRef. testNumber = 3 will create a property on the objectRef object named testNumber. When you want to read testNumber
The propertype chain will not work, and only get the objectRef property 3, while the testNumber attribute of MyObject1 will not be modified. The following code can verify
Code

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