Prototype and closure are the difficulties of Js language. This article mainly describes the inheritance of prototype and prototype implementation. In (2), I will talk about closure and hope to help you. If you have any questions or errors, you are welcome to correct and discuss them.
I. Prototype And Constructor
All functions of Js have a prototype attribute, which references an object (prototype. This function includes constructor and common function. We are talking about the prototype of the constructor, but we cannot deny that common functions also have the original type. For example, common functions:
The Code is as follows:
Function F (){
Alert (F. prototype instanceof Object) // true;
}
Constructor, that is, the constructor object. First, understand the process of instantiating an object through the constructor.
The Code is as follows:
Function A (x ){
This. x = x;
}
Var obj = new A (1 );
There are three steps to instantiate an obj object:
1. Create an obj Object: obj = new Object ();
2. point the internal _ proto _ of obj to construct the prototype of function A. At the same time, obj. constructor =. prototype. constructor (this is always true, even if. prototype no longer points to the original prototype A, that is, the constructor attribute of the Instance Object of the class always points to the prototype of the "constructor. constructor) to make obj. constructor. prototype points to. prototype (obj. constructor. prototype =. prototype, when. prototype is not valid when it is changed. We will see it below ). Obj. constructor. prototype and internal _ proto _ are two different things. when instantiating an object, _ proto _ is used. obj has no prototype attribute, but internal _ proto __, the prototype attributes and prototype methods on the prototype chain are obtained through _ proto __. FireFox exposes _ proto __. you can use alert (obj. _ proto __);
3. Use obj as this to call constructor A, so as to set members (that is, object attributes and object methods) and initialize them.
When the three steps are completed, the obj object will no longer be associated with constructor A. In this case, even if constructor A adds any member, the instantiated obj object will no longer be affected. In this case, the obj object has the x attribute and all the members of the prototype object of constructor A. Of course, the prototype object has no members.
The prototype object is empty at first, that is, there is no Member (that is, the prototype attributes and prototype methods ). You can verify the number of members of a prototype object by using the following methods.
The Code is as follows:
Var num = 0;
For (o in A. prototype ){
Alert (o); // The Name Of The prototype attribute.
Num ++;
}
Alert ("member:" + num); // The number of all members of the prototype generated by alert.
However, once a prototype attribute or prototype method is defined, all objects instantiated by the constructor inherit these prototype attributes and prototype methods, this is achieved through the internal _ proto _ chain.
For example
A. prototype. say = function () {alert ("Hi ")};
All objects of A have the say method. The say method of the prototype object is the only copy shared by everyone, rather than A copy of The say method for each object.
Ii. prototype and inheritance
First, let's look at a simple inheritance implementation.
The Code is as follows:
Function A (x ){
This. x = x;
}
Function B (x, y ){
This. tmpObj =;
This. tmpObj (x );
Delete this. tmpObj;
This. y = y;
}
Rows 5th, 6, and 7: create A temporary attribute tmpObj to reference constructor A, execute it within B, and delete it after execution. When this. after x = x (here this is the object of B), B certainly has the x attribute. Of course, the x attribute of B is independent of the x attribute of, therefore, it cannot be regarded as a strict inheritance. Rows 5th, 6, and 7 have A simpler implementation, that is, using the call (apply) method: A. call (this, x );
Both methods pass this to the execution of A. this points to the object of B, which is why A (x) is not directly used. This Inheritance Method is class inheritance (js does not have A class. Here it only refers to the constructor). Although it inherits all the attribute methods of A constructor object, it cannot inherit the members of A's prototype object. To achieve this goal, we need to add prototype inheritance on this basis.
Through the example below, we can have a deep understanding of the prototype and the perfect inheritance of prototype participation in implementation. (The core of this article is here ^_^)
The Code is as follows:
Function A (x ){
This. x = x;
}
A. prototype. a = "";
Function B (x, y ){
This. y = y;
A. call (this, x );
}
B. prototype. b1 = function (){
Alert ("b1 ");
}
B. prototype = new ();
B. prototype. b2 = function (){
Alert ("b2 ");
}
B. prototype. constructor = B;
Var obj = new B (1, 3 );
In this example, B inherits. 7th row class inheritance: A. call (this. x); As mentioned above. The prototype inherits 12th rows: B. prototype = new ();
That is to say, the prototype of B points to one instance object of A. This instance object has the x attribute, undefined, and a attribute, and the value is "". Therefore, prototype B also has these two attributes (or, B and A establish the prototype chain, and B is the lower level of ). Because only the class inherits, B's instance object also has the x attribute, that is, the obj object has two x attributes with the same name. In this case, the prototype property x must be located in the Instance Object Property x, so obj. x is 1, not undefined. Line 2 defines the prototype b2, so the prototype B also has b2. Although 9th ~ The prototype method b1 is set in row 11, but you will find that after row 11 is executed, the prototype B no longer has the b1 method, that is, the obj. b1 is undefined. Because row 12th changes the orientation of the B prototype, the original prototype object with b1 is discarded, and naturally there is no b1.
After the execution of row 12th is complete, the prototype B (B. prototype) points to the Instance Object of A, and the constructor of instance object of A is constructor A, so B. prototype. constructor is to construct object A (in other words, A constructs the prototype of object B ).
Alert (B. prototype. constructor) is "function A (x ){...}". Similarly, obj. constructor is also A constructor, alert (obj. constructor) is "function A (x ){...} ", that is, B. prototype. constructor = obj. constructor (true), but B. prototype = obj. constructor. prototype (false), because the former is the prototype of B and has members: x, a, b2. The latter is the prototype of A and has members:. How can we fix this problem? In row 16th, the constructor of prototype B points to the constructor of type B again, then B. prototype = obj. constructor. prototype (true) has the following members: x, a, and b2.
If there are no 16th rows, Will obj = new B () call the constructor for instantiation? The answer is no. You will find that obj. y = 3, so it is still instantiated by calling the B constructor. Although obj. constructor = A (true), but for the new B () behavior, the above three steps to create an instance object through the constructor are executed, step 1, create an empty object. Step 2: obj. _ proto _ = B. prototype, B. prototype is composed of x, a, and b2, obj. constructor points to B. prototype. constructor, that is, constructor A; step 3, call constructor B to set and initialize members, with properties x and y. Although not adding 16 rows does not affect the properties of obj, as mentioned above, obj. constructor and obj. constructor. prototype are affected. Therefore, after prototype inheritance is used, you need to modify the operation.
With regard to rows 12th and 16, in general, rows 12th make prototype B inherit all members of A's prototype object, however, the prototype of the constructor of the Instance Object of B also points to the prototype of A. Therefore, this defect should be corrected through row 3.
Complete.
