Javascript prototype chain

1. Window. onload = function (){
2. 2 /**//*
    
3. 3. Each object instance has an attribute member pointing to its prototype of the instanceof object (temporarily called the parent object)
    
4. 4. We call this layer-by-layer relationship pointing to the parent prototype [prototype Chian]
    
5. 5 prototype also has a parent prototype, because it is often an object instance, unless we artificially change it
    
6. 6
7. 7
8. 8 In JavaScript, "Everything is an object, and the function is the first type. "
    
9. 9. Both function and object are function instances.
10. 10. The parent prototype of the function points to the prototype of the function. The parent prototype of function. prototype is the prototype of the object.
     
11. 11 The parent prototype of an object also points to the function prototype, which is the top layer of all parent prototypes.
     
12. 12
13. 13 In the spidermonkey engine, the parent prototype can be accessed through _ PROTO _
     
14. 14
15. 15
16. 16
17. 17 when reading this article, you can read several articles repeatedly to deepen your understanding, especially the prototype, parent prototype, and prototype chain.
     
18. 18
19. 19 * prototype is used to access the prototype.
20. 20 * _ PROTO _ parent prototype for access
21. 21 * instanceof parent class of the prototype chain
22. 22
23. 23 */
24. 24 function. Prototype. Hi = function () {alert ('Hi function ');}
25. 25 object. Prototype. Hi = function () {alert ('Hi object ');}
26. 26
27. 27 var A = function (){
28. 28 this.txt = 'a ';
29. 29 };
30. 30 a. Prototype = {
31. 31 say: function () {alert ('A ');}
32. 32 };
33. 33
34. 34 alert (A instanceof function); // A is a function instance;
    
35. 35 alert (A. _ PROTO _ = function. Prototype );
36. 36 // The parent prototype of a points to the function prototype;
    
37. 37 // A. _ PROTO _ parent prototype Function
    
38. 38 // function. Prototype parent prototype Function
    
39. 39
40. 40 alert (function instanceof object );
41. 41 // function is an object instance;
    
42. 42
43. 43 alert (function. _ PROTO _ = function. Prototype );
44. 44 // The parent prototype of the function points to the prototype of the function;
    
45. 45
46. 46 alert (function. Prototype. _ PROTO _ = object. Prototype );
47. 47 // The parent prototype of the function points to the object prototype
    
48. 48
49. 49 alert (object. _ PROTO _ = function. Prototype );
50. 50 // The parent prototype of the object points to the prototype of the function;
    
51. 51 alert (object. Prototype. _ PROTO __);
52. 52 // the prototype of the object is the top of all parent prototypes. It no longer has the parent prototype, so the result is null;
    
53. 53
54. 54
55. 55 alert (A. Prototype instanceof object );
56. 56 // the prototype of a is also an object
57. 57 alert (A. Prototype. _ PROTO _ = object. Prototype );
58. 58 // The parent prototype of a's prototype points to the object's prototype
    
59. 59 };

Ecmascript can recognize two types of objects: Native object and Host object, which are provided by the runtime environment, for example, document object,

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.

Java code
 

1. VaR objectref = new object (); // create a generic JavaScript Object.

VaR objectref = new object (); // create a generic JavaScript Object.

A property named testnumber can be created in this way.

Java code
 

1. Objectref. testnumber = 5;
2. /*-Or :-*/
3. Objectref ["testnumber"] = 5;

Objectref. testnumber = 5;/*-or:-*/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.

Java code
 

1. Objectref. testnumber = 8;
2. /*-Or :-*/
3. Objectref ["testnumber"] = 8;

Objectref. testnumber = 8;/*-or:-*/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.

Java 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;
6. /* Now Val gets the value 8 that has just been granted to objectref */

/* 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 */objectref. testnumber = 8;/* read the value of this attribute */var val = objectref. testnumber;/* Now Val gets the value 8 that was just given to objectref */

Prototype Encryption
[Color = Blue]
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)

Java code
 

1. VaR objectref = new object (); // create a generic JavaScript Object.

VaR objectref = new object (); // create a generic JavaScript Object.

Create a new JS object. The prototype of this object is null,Therefore, the prototype chain of objectref contains only one object. prototype.

We are looking at the following code:

Java 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. }
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 */
15. This. teststring = formalparameter;
16. }
18. /* The next step will replace the default prototype attribute of myobject2 with the myobject1 object */
19. Myobject2.prototype = new myobject1 (8 );
21. /* Create an object of the myobject2 type */
23. VaR objectref = new myobject2 ("string_value ");

/* Construct the constructor myobject1-type. */function myobject1 (formalparameter) {/* creates an attribute named testnumber */This for the object. testnumber = formalparameter;}/* construct a constructor of the myobject2 type myobject2-type:-*/function myobject2 (formalparameter) {/* Create an attribute named teststring */This for the object. teststring = formalparameter;}/* the next operation replaces the default prototype attribute of myobject2 with the myobject1 object */myobject2.prototype = new myobject1 (8 ); /* Finally, create an object of the myobject2 type */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.

Null → object. Prototype → boject → myobject1 → objectref

Java code
 

1. Var val = objectref. teststring;

Var val = objectref. teststring;

The objectref object has a property named teststring, so this code will assign the value of teststring to Val

Java code
 

1. Var val = objectref. testnumber;

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.

Java code
 

1. Var val = objectref. tostring;

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.

Java code
 

1. Var val = objectref. madeupproperty;

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 isOBJ object itselfCreate an attribute with the same name (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

Java 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. }
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 */
15. This. teststring = formalparameter;
16. }
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;
22. /* Create an object of the myobject2 type */
24. VaR objectref = new myobject2 ("string_value ");
26. Alert (objectref. testnumber );
27. Objectref. testnumber = 5;
28. Alert (objectref. testnumber );
29. Alert (obj1.testnumber );