JavaScript object-oriented

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

A. The relationship between functions and prototypes

1. As long as a function is created, it will be created for the function according to a specific set of rules A prototype attribute (prototype object)
For example:
function fun(){
 
}
console.log(fun.prototype); //fun {}, indicating that prototype is an object
Note: the attributes and methods defined in the prototype It is shared by all instantiated objects that call the constructor. 2. The prototype attribute will automatically obtain a constructor (constructor) attribute. The constructor attribute contains the pointer of the function (fun) where the prototype attribute is located (very important), indicating that in the constructor (fun) can access the properties and methods defined in the prototype.

If the constructor defines the property method with the same name in the prototype, then the instance will call the redefined properties and methods; when a function uses the new operator instance When instantiating an object, 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: "yjh"
}
var fun1 = new fun();
console.log(fun.prototype.constructor == fun); // true
console.log(fun1.constructor == fun); //true

B. The relationship between instantiated objects and prototypes

1. When a function uses the new operator to instantiate an object, the object contains a The intrinsic __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); Ge;; }
}
var fun1 = new fun("yjh","23");
console.log(fun1.__proto__) //fun { age="22", sayAge=function()}
console.log(fun1 .__proto__ == fun.prototype); //true

C. The relationship between instance objects and functions (constructors)

1. When a function uses the new operator to instantiate an object, the instance object passes the internal attribute __proto__ Points to the prototype and shares the properties and methods defined in the prototype. Since the constructor property in the prototype points to the constructor, the instance object also has the properties 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("yjh", "23");
fun1.sayName(); //yjh

D. The relationship between functions (constructors), instance objects, and prototypes

1. When calling instantiated object properties and methods, then First, it will search for the properties and methods defined by the instance object itself. If not, it will continue to search for the prototype. For example:
function fun(name,age){
this.name = name;
this.age = age;
this.sayName = function(){
                           alert(this.name);                                                                                                                                                        = function(){ var fun1 = new fun("yjh","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 the prototype, find the sayName method in the prototype, continue to search for the age attribute, and find that the age value has been defined in the fun1 instance object, so use it directly and no longer search; if the age attribute is not directly defined in the fun1 instance object, Then the result is 23. The reason is because the constructor redefines the age attribute of the instance object

____________________________________________

2. Object-oriented mode:
Initial understanding of functions:
a. Any function in JavaScript is an instance of the Function type and an instance of the Object type. If a function function is defined, then it is an instance. Object, the internal attribute __proto__ of the instance object points to the prototype attribute of the Object constructor, so the instance inherits the default attributes and methods of the Object object;
b. Ordinary functions return undefined by default, and the constructor returns an instance object.

1. To create an object, use a specific interface new Object()
Disadvantages: Using the same interface to create many objects will produce a lot of repeated code

2. Use the factory pattern, encapsulate it with functions, and create objects with a specific interface
For example:
function createObj(name,age){
var o = new Object();
o.name = name;
o.age = age;
return o;
}
var o1 = createObj("yjh" ,23)
Advantages: It solves the problem of using an interface to create multiple similar objects and generates a lot of duplicate code
Disadvantages: It does not solve the problem of object recognition, that is, what kind of object type o1 is

3. Constructor pattern, JavaScript There is 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);
Advantages: Solve the problem of instance object type identification, obj1, obj2 objects are CreateObj Type www.2cto.com
Disadvantages: The properties and methods defined by the constructor are not shared by all instances. The methods called by each instance are two instances of different Function types (obj1.sayName != obj2.sayName)

4. Prototype mode

For example:
function CreateObj(){
}
CreateObj.prototype = {
 constructor: CreateObj,
 name: "yjh",
 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 calling the properties and methods of obj1 and obj2 instances, the properties defined by the instance itself will be searched first and methods, if not, since the __proto__ internal attribute of the instance points to the prototype,
it will continue to search for the attributes and methods defined in the prototype

Advantages: The attributes and methods defined in the prototype are shared by all instance objects, solved Problems with multiple functions implementing the same function

Disadvantages: If the properties defined in the prototype contain reference type values, then modifying the value of one instance property will affect the value of another instance property. This is due to the shared nature of the prototype The resulting

5. Combination mode (constructor mode and prototype mode)

Such as:
function CreateObj(name,age){
console.log(this.name);//yjhyjh
this.name = name;
this.age = age;
this.colors = ["a","b"];
}
CreateObj.prototype = {
constructor: CreateObj,
name: "yjhyjh",
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
Explanation: Define the properties that do not need to be shared by all instances in the constructor, define the properties and methods that need to be shared in the prototype, the advantages and disadvantages of the complementary constructor pattern and the prototype pattern,
The prototype is all instantiated objects The prototype object, the instance and the prototype are connected to the prototype through the instance internal attribute __proto__. All instances share the attributes and methods in the prototype. If the constructor redefines the attributes and methods with the same name in the prototype, then the instance object The properties and methods defined in the constructor will be called.

6. Inheritance (implementation inheritance, prototype chain)
is to use the prototype of one constructor as the instantiated object of another constructor, then this instantiated prototype object will inherit the prototype attributes and methods of the other constructor, this is The so-called prototype chain
such as:
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
Disadvantages: from the prototype containing reference type values, the properties and methods defined in the prototype are shared by all instances, the Fun2.prototype prototype object is an instance of the Fun1 type,
so the prototype object contains reference type values The name attribute. When instantiating multiple Fun2 type objects, all instance objects share this prototype name attribute. By modifying the name attribute value in the instance,
will directly modify the name attribute value defined in the prototype

7. Combination Inheritance (inheritance and borrowing constructors)
For example:
function Fun1(){
this.name = ["yjh1","yjh2"];
}
Fun1.prototype = {
constructor: Fun1,
sayName: function( ; .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: Due to the attributes defined in the constructor, the method is not shared by all instances and will be overridden Properties and methods defined in the prototype, so it will not cause problems due to the instantiated prototype object (Fun2.prototype) containing properties with reference type values