JavaScript custom type

1. Create mode directly. This is the simplest and most direct mode. First, create an object of the reference type and add custom attributes and methods to it. The sample code is as follows:
Copy codeThe Code is as follows:
Var person = new Object ();
Person. name = "Sam ";
Person. age = 16;
Person. speak = function (){
Alert (this. name + "is" + this. age + "years old ");
}
Person. speak ();

We can see that an Object of the Object type is created above, and then the name and age attributes and a speak method are added to the Object. The direct creation mode is simple, but its disadvantage is obvious: When we need to create many identical objects, code should be repeatedly written every time. To solve this problem, we can encapsulate the process of creating an object, so we have the following factory mode.
2. Factory model. The factory mode is a common design mode in programming. It encapsulates the process of creating objects. The sample code is as follows:

Copy codeThe Code is as follows:
Function createPerson (name, age ){
Var person = new Object ();
Person. name = name;
Person. age = age;
Person. speak = function (){
Alert (this. name + "is" + this. age + "years old ");
}
Return person;
}
Var person1 = createPerson ("Sam", 16 );
Var person2 = createPerson ("Jack", 18 );

After the factory mode is used, it is easy to create objects of the same type. However, the factory mode does not solve the problem of object recognition, that is, we cannot determine the specific type of the created object. Developers who have experience in Object-Oriented Programming know that object creation should be based on classes and have a specific custom class, and then create the object of this class. Fortunately, in JavaScript, we can simulate a class through the constructor mode.
3. constructor mode. Constructor is no different from normal function. Any common function can be used as a constructor. You only need to use the new operator. Any constructor can also be called as a normal function. However, in JavaScript, there is a convention that the name of the function used as the constructor must be capitalized. The sample code is as follows:

Copy codeThe Code is as follows:
Function Person (name, age ){
This. name = name;
This. age = age;
This. speak = function (){
Alert (this. name + "is" + this. age + "years old ");
}
}
Var person1 = new Person ("Sam", 16 );
Var person2 = new Person ("Jack", 18 );

We can see that in the constructor, we use this to add attributes and Methods. So what does this mean? When we create a Person object, this is the created object. Now, we can identify the specific types of the objects person1 and person2. After using alert (person1 instanceOf Person), you can find that the output value is true. However, the constructor mode also has its own disadvantage, that is, the methods declared in the constructor will be re-created every time a new object is created (in JavaScript, the function is also an object ). That is to say, the methods in the constructor are bound to objects rather than classes. The output of the following code can verify our inference.
Alert (person1.speak = person2.speak); // false a simple method to solve this problem is to put the function declaration out of the constructor, namely:

Copy codeThe Code is as follows:
Function Person (name, age ){
This. name = name;
This. age = age;
This. speak = speak;
}
Function speak (){
Alert (this. name + "is" + this. age + "years old ");
}
Var person1 = new Person ("Sam", 16 );
Var person2 = new Person ("Jack", 18 );
Alert (person1.speak = person2.speak); // true

The problem is solved, but this method brings about new problems. First, the function speak is declared in the global scope, but it can only be used for the Person constructor, and there is a risk of misuse in the global scope. Second, if a user-defined type has many methods, many global functions need to be declared, which will cause global scope pollution and will not be conducive to code encapsulation. Is there any way to bind a custom type to a class without affecting the global scope? The answer is to use the prototype.
4. prototype mode. After we declare a new function, the function (in JavaScript, the function is also an object) will have a prototype attribute. Prototype is an object that indicates the public attributes and methods of all objects created by the function. The sample code is as follows:

Copy codeThe Code is as follows:
Function Person (){}
Person. prototype. name = "Sam ";
Person. prototype. age = 16;
Person. prototype. speak = function (){
Alert (this. name + "is" + this. age + "years old ");
}
Var person1 = new Person ();
Person1.speak ();
Var person2 = new Person ();
Alert (person1.speak = person2.speak); // true


We can see that although the speak method is not declared in the constructor, the created object person1 can still call the speak method. This is because JavaScript has a search rule that searches for instance attributes and methods first, if no result is found, the system returns the result. If no result is found, it is searched in prototype. The prototype makes the method related to the class and does not pollute the global scope, but it also has its own shortcomings: first, all attributes are also related to the class, this means that all objects share an attribute, which is obviously unreasonable. Second, there is no way to pass in Initialization data to the constructor. The solution is simple, that is, the constructor mode and the prototype mode are mixed.
5. Combination Mode. The sample code is as follows:

Copy codeThe Code is as follows:
Function Person (name, age ){
This. name = name;
This. age = age;
}
Person. prototype. speak = function (){
Alert (this. name + "is" + this. age + "years old ");
}
Var person1 = new Person ();
Person1.speak ();
Var person2 = new Person ();
Alert (person1.speak = person2.speak); // true

It is not difficult to find that the combination mode meets all our needs, which is also a widely used mode. Developers with object-oriented programming experience may find it awkward to put prototype declarations out of the constructor. Can they put them in the constructor? The answer is yes. Use the dynamic combination mode.
6. dynamic combination mode. The principle is to first determine whether an attribute or method in the prototype has been declared. If no declaration is made, the entire prototype is declared; otherwise, nothing needs to be done. The sample code is as follows:

Copy codeThe Code is as follows:
Function Person (name, age ){
This. name = name;
This. age = age;
If (Person. prototype. speak = "undefined "){
Person. prototype. speak = function (){
Alert (this. name + "is" + this. age + "years old ");
}
}
}