JavaScript object-oriented

1. Relationships between functions (constructors), prototypes, and instance objects

A. Relationship between functions and prototypes

1. Once a function is created, it creates a prototype attribute (prototype object) for the function based on a specific set of rules)
For example:
Function fun (){

}
Console. log (fun. prototype); // fun {}, indicating that prototype is an object
Note: The attributes and methods defined in the prototype are shared by all the call constructor instantiation objects.

2. The prototype attribute will automatically obtain a constructor (constructor) attribute. The constructor attribute contains the pointer (important) of the function (fun) where the prototype attribute is located, indicating that in the constructor (fun) you can access the properties and methods defined in the prototype,
If the constructor defines an attribute method with the same name in the prototype, the instance will call the redefined attributes and Methods. When a function instantiates an object using the new operator, it is used to identify the type of the instantiated object (it does not have much practical significance)
For example:
Function fun (name ){
Console. log (fun. prototype. name = this. name); // true (yjh)
This. name = "yjh1 ";
Console. log (this. name); // yjh1
Console. log (fun. prototype. name = this. name); // false (yjh, yjh1)
}
Fun. prototype = {
Constructor: fun,
Name: "yaml"
}
Var fun1 = new fun ();
Console. log (fun. prototype. constructor = fun); // true
Console. log (fun1.constructor = fun); // true

B. Relationship between the instantiated object and the prototype

1. When a function uses the new operator to instantiate an object, the object contains an internal _ proto _ attribute pointing to the prototype, which only exists between the instance object and the prototype object.
For example:

Function fun (name, age ){
This. name = name;
This. age = age;
This. sayName = function (){
Alert (this. name );
}
}
Fun. prototype = {
Constructor: fun,
Age: 22,
SayName: function (){
Alert (this. age );
}
}
Var fun1 = new fun ("yaml", "23 ");
Console. log (fun1. _ proto _) // fun {age = "22", sayAge = function ()}
Console. log (fun1. _ proto _ = fun. prototype); // true
 
C. Relationship between instance objects and functions (constructor)

1. When a function uses the new operator to instantiate an object, the Instance Object directs to the prototype through the internal attribute _ proto _ and shares the attributes and methods defined in the prototype,
Because the constructor attribute in prototype points to the constructor, the instance object also has the attributes and methods defined in the constructor.
For example:
Function fun (name, age ){
This. name = name;
This. age = age;
This. sayName = function (){
Alert (this. name );
}
}
Var fun1 = new fun ("yaml", "23 ");
Fun1.sayName (); // ystrap

D. Relationships between functions (constructors) and instance objects and prototypes

1. When calling the instantiated object attributes and methods, the attributes and methods defined by the instance object will be searched first. If not, the prototype will continue to be searched.
For example:
Function fun (name, age ){
This. name = name;
This. age = age;
This. sayName = function (){
Alert (this. name );
}
}
Fun. prototype. age = "22 ";
Fun. prototype. sayAge = function (){
Alert (this. age );
}
Var fun1 = new fun ("yaml", "23 ");
Fun1.age = 24;
Fun1.sayAge (); // 24. The method in the prototype is called;
First, search for the sayAge method, which is not found in the instance object. Search for the prototype, find the sayName method in the prototype, continue to search for the age attribute, and find that there is a defined age value in the fun1 instance object. Therefore, you can directly use it, the search is no longer performed. If the age attribute is not defined directly in the fun1 instance object, the result is 23 because the constructor redefined the age attribute of the Instance Object.

________________________________________

Ii. object-oriented model:
Preliminary understanding of functions:
A. Any Function in JavaScript is an instance of the function type and an Object instance. If a Function is defined, it is an instance Object, the internal attribute _ proto _ of the Instance Object points to the prototype attribute of the Object constructor. Therefore, the instance inherits the default attributes and methods of the Object;
B. By default, normal functions return undefined, and constructors return an instance object.

1. Create an Object and use a specific interface new Object ()
Disadvantage: using the same interface to create many objects will produce a large number of repeated codes.

2. Use factory mode and function encapsulation to create objects with specific Interfaces
For example:
Function createObj (name, age ){
Var o = new Object ();
O. name = name;
O. age = age;
Return o;
}
Var o1 = createObj ("yaml", 23)
Advantage: solves the problem of using one interface to create multiple similar objects to generate a large number of repeated codes.
Disadvantage: the problem of object recognition is not solved, that is, what kind of object type is o1?

3. constructor mode. JavaScript has no class concept.
For example:
Function CreateObj (name, age ){
This. name = name;
This. age = age;
This. sayName = function (){
Alert ("hi" + this. name );
}
}
Var obj1 = new CreateObj ("yjh1", 23 );
Var obj2 = new CreateObj ("yjh2", 23 );
Advantage: solved the problem of Instance Object Type Recognition. obj1 and obj2 objects are of the CreateObj type www.2cto.com.
Disadvantage: the attributes and methods defined by the constructor are not shared by all instances. Each instance calls two instances of different Function types (obj1.sayName! = Obj2.sayName)

4. Prototype
For example:
Function CreateObj (){
}
CreateObj. prototype = {
Constructor: CreateObj,
Name: "yaml ",
Age: 23,
Colors: ["a", "B"],
SayName: function (){
Alert (this. name );
}
}
Var obj1 = new CreateObj ();
Var obj2 = new CreateObj ();
Alert (obj1.sayName = obj2.sayName); // true
Obj1.colors. push ("c ");
Alert (obj2.colors); // a, B, c
Note: When you call the properties and methods of the obj1 and obj2 instances, the attributes and methods defined by the instance are first searched. If not, the internal properties of the Instance _ proto _ point to the prototype,
Therefore, you will continue to search for the attributes and methods defined in the prototype.

Advantage: the attributes and methods defined in the prototype are shared by all instance objects and solve the problem of multiple functions implementing the same function.
Disadvantage: If the property defined in the prototype contains the value of the reference type, modifying the attribute value of one instance affects the attribute value of another instance. This is due to the sharing nature of the prototype.

5. Combination Mode (constructor mode and prototype mode)
For example:
Function CreateObj (name, age ){
Console. log (this. name); // yjhy.pdf
This. name = name;
This. age = age;
This. colors = ["a", "B"];
}
CreateObj. prototype = {
Constructor: CreateObj,
Name: "yjhy.pdf ",
SayName: function (){
Return this. name;
}
}
Var obj1 = new CreateObj ("yjh1", 23 );
Var obj2 = new CreateObj ("yjh2", 23 );
Alert (obj1.sayName = obj2.sayName); // true
Alert (obj1.sayName (); // yjh1
Alert (obj2.sayName (); // yjh2
Obj1.colors. push ("c ");
Alert (obj2.colors); // a, B
Note: attributes that do not need to be shared by all instances are defined in the constructor. attributes that need to be shared and methods are defined in the prototype. The constructor mode and prototype mode complement each other,
The prototype is the prototype object of all instantiated objects. The prototype is connected to the prototype through the internal attribute _ proto _ of the instance. All instances share the attributes and methods of the prototype, if the constructor re-Defines attributes and methods of the same name in the prototype,
The instance object will call the attributes and methods defined in the constructor.

6. Inheritance (Implementation inheritance, prototype chain)
The prototype of a constructor is used as the instantiation object of another constructor. This prototype object inherits the prototype attributes and methods of another constructor. This is called the prototype chain.
For example:
Function Fun1 (){
This. name = ["yjh1", "yjh2"];
}
Fun1.prototype = {
Constructor: Fun1,
SayName: function (){
Alert (this. name)
}
}
Function Fun2 (){}
Fun2.prototype = new Fun1 ();
Var fun2 = new Fun2 ();
Fun2.sayName (); // yjh1, yjh2
Fun2.name. push ("yjh3"); // fun2.name = ["yjh1", "yjh2", "yjh3"];
Var fun3 = new Fun2 ();
Alert (fun3.name); // yjh1, yjh2, yjh3
Disadvantage: A Prototype is a prototype that contains reference type values. attributes defined in the prototype are shared by all instances. The Fun2.prototype prototype object is an instance of the Fun1 type,
Therefore, the prototype object contains the name attribute that references the type value. When multiple Fun2 type objects are instantiated, all instance objects share the prototype name attribute. By modifying the name attribute value in the instance,
The name attribute value defined in the prototype is directly modified.

7. Combination inheritance (Inheritance and borrow constructor)
For example:
Function Fun1 (){
This. name = ["yjh1", "yjh2"];
}
Fun1.prototype = {
Constructor: Fun1,
SayName: function (){
Alert (this. name)
}
}
Function Fun2 (){
Fun1.call (this );
}
Fun2.prototype = new Fun1 ();
Var fun2 = new Fun2 ();
Fun2.sayName (); // yjh1, yjh2
Fun2.name. push ("yjh3"); // fun2.name = ["yjh1", "yjh2", "yjh3"];
Var fun3 = new Fun2 ();
Alert (fun2.name); // yjh1, yjh2, yjh3
Alert (fun3.name); // yjh1, yjh2
Note: Because the attributes defined in the constructor are not shared by all instances and will overwrite the attributes and methods defined in the prototype, it will not instantiate the prototype object (Fun2.prototype) contains the property of the reference type value and
Problems

 

From huazi Yanyi