Recently I am reading JavaScript advancedProgramDesign, specifically elaborate on the creation of objects, and sum up (JE Knowledge Base JavaScript column from this tutorial, interested can go to the knowledge base to see)
First mode: factory mode JS Code
- VaREv =Function(){
-
-
- Return "Ah Pai";
-
- };
-
- FunctionParent (){
-
- VaRChild =NewObject ();
-
- Child. Name ="Bruce Lee";
- Child. Age ="30";
-
- Child. lev= lev;
-
- ReturnChild;
-
- };
-
-
- VaRX = parent ();
-
- Alert (X. Name );
-
- Alert (X. lev ());
Note:
1. define an object in a function and define various attributes of the object. Although the attribute can be a method, we recommend that you define the attribute as a method outside the function to avoid repeated creation of this method.
2. when referencing this object, we use VaR x = parent () instead of VaR x = new parent (); because the latter may have many problems (the former has become a classic factory method, and the latter is called a hybrid factory method), we do not recommend using the new method to use this object.
3. This object is returned at the end of the function.
4. This method is not recommended for object creation, but you should understand
Mode 2: constructor JS Code
-
- VaREv =Function(){
-
- Return "Ah Pai";
-
- };
-
- FunctionParent (){
-
-
- This. Name ="Bruce Lee";
-
- This. Age ="30";
-
- This. Lev= lev;
-
- };
-
-
- VaRX =NewParent ();
-
- Alert (X. Name );
-
- Alert (X. lev ());
Note:
1. Compared with the factory method, the constructor method is used to create an object, and the function does not need to re-create the object inside the function. This is used to refer to the object, and the function does not need to explicitly return
2. Like the factory mode, although the attribute value can be a method, we recommend that you define this method outside the function.
3. Similarly, it is not recommended to use this method to create objects, but you still need to know
3rd modes: prototype mode JS Code
-
- VaREv =Function(){
-
- Return "Ah Pai";
-
- };
-
- FunctionParent (){
-
-
-
- };
-
- Parent. Prototype. Name ="Bruce Lee";
-
- Parent. Prototype. Age ="30";
-
- Parent. Prototype. lev= lev;
-
- VaRX =NewParent ();
-
- Alert (X. Name );
-
- Alert (X. lev ());
Note:
1. attributes are not defined in the function.
2. Define attributes using the prototype attribute
3. Similarly, we do not recommend using this method to create objects.
Fourth mode: Mixed constructor, prototype (recommended) JS Code
-
- FunctionParent (){
-
- This. Name ="Bruce Lee";
-
- This. Age = 32;
-
- };
-
- Parent. Prototype. lev=Function(){
-
-
- Return This. Name;
-
- };;
-
-
- VaRX =NewParent ();
-
-
- Alert (X. lev ());
Note: 1. This mode refers to the combination of constructor and prototype.
2. Define all attributes that are not methods in the function (constructor Mode)
Define all attributes whose property values are method attributes outside the function using prototype (prototype)
3.We recommend that you create an object in this way,It is advantageous to do so and why not use the constructor and prototype separately. Due to space issues, we will not discuss them here.
Fifth mode: Dynamic Prototype JS Code
-
- FunctionParent (){
- This. Name ="Bruce Lee";
-
- This. Age = 32;
-
- ;
-
- If(TypeofParent. _ lev= ="Undefined"){
-
-
-
- Parent. Prototype. lev=Function(){
-
- Return This. Name;
-
- }
-
- Parent. _ lev=True;
-
- }
-
-
- };
-
-
-
- VaRX =NewParent ();
-
- Alert (X. lev ());
Note:
1. The dynamic prototype can be understood as a hybrid constructor. A special case of the prototype
2. In this mode, the property for the method is directly defined in the function, but because
JS Code
- If(TypeofParent. _ lev= ="Undefined"){
- Parent. _ lev=True;}
This ensures that the attribute method will not be created repeatedly when the instance of this object is created.
3. This mode is recommended.