1, the direct creation mode. This is the simplest and most straightforward pattern, first creating an object of reference type, and then adding custom properties and methods to it. The sample code is as follows:
Copy Code code 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 ();
You can see that an object of type object was created above, and then the name and age attribute and a speak method were added to it. The direct creation pattern is simple, but its drawbacks are obvious: when we need to create many of the same objects, we write the code repeatedly. To solve this problem, we can encapsulate the process of creating the object, so we have the following factory pattern.
2, Factory mode. Factory mode is a commonly used design pattern in programming, it mainly encapsulates the process of creating an object, and the sample code is as follows:
Copy Code code 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);
When you use Factory mode, creating objects of the same type becomes easy. But the factory pattern does not solve the problem of object recognition, that is, we cannot determine the specific type of object being created. Developers who have experience with object-oriented programming know that object creation should be based on classes, with specific custom classes, to create objects of that class. Fortunately, in JavaScript, we can simulate a class by constructing a function pattern.
3, the constructor function pattern. There is no difference between a constructor and a normal function. Any normal function can be a constructor, as long as the new operator is used, and any constructor can be invoked as a normal function. Just in JavaScript, there is a convention, that is, a function name used as a constructor requires a first letter capitalization. The sample code is as follows:
Copy Code code 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);
As you can see, within the constructor we use this to add properties and methods, so what does this one mean? When we create a person's object, this refers to the object that was created. Now we can identify the specific types of objects Person1 and Person2. When you use alert (person1 instanceof person), you can see that the output value is true. However, the constructor pattern has its own drawbacks, that is, the method declared within the constructor is recreated each time a new object is created (in JavaScript, the function is also an object). In other words, the methods within the constructor are bound to the object, not to the class. The output of the following code can validate our inference.
Alert (Person1.speak = = Person2.speak); A simpler way to solve this shortcoming is to put the declaration of a function outside of the constructor, namely:
Copy Code code 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 has been solved, but this method has brought new problems. First, the function speak is declared in the global scope, however, it can only be used for the person constructor, where there is a risk of being misused in the global scope, and secondly, if a custom type has many methods, a lot of global functions need to be declared, which will cause pollution of the global scope, is also not conducive to code encapsulation. So, is there any way to make a custom type of method that is bound to a class without polluting the global scope? The answer is to use prototype mode.
4, prototype mode. After we declare a new function, the function (in JavaScript, the function is also the object) will have a prototype attribute. Prototype is an object that represents the public properties and methods that are owned by all objects that are created by the function. The sample code is as follows:
Copy Code code 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
As you can see, although there is no speak method declared within the constructor, the object we create Person1 can still invoke the Speak method, because JavaScript has a search rule that searches for instance properties and methods first, and then returns if they are found. Then go to the prototype to search. The prototype pattern allows the method to be related to the class, and there is no pollution to the global scope, but it also has its own disadvantages: first, all attributes are also related to the class, which means that all objects share a property, which is obviously unreasonable; second, there is no way to pass initialization data to the constructor. The solution is simple: Mix the constructor pattern with the prototype schema.
5, Combination mode. The sample code is as follows:
Copy Code code 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 of patterns to achieve all of our needs, which is now widely used in a more extensive mode. Developers with object-oriented programming experience might find it a bit awkward to put a prototype declaration outside the constructor, so can you put it in a constructor? The answer is yes, you can use the dynamic combination mode.
6, dynamic combination mode. The principle is to first determine whether a property or method in the prototype has been declared, and if there is no declaration, declare the entire prototype; The sample code is as follows:
Copy Code code 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");
}
}
}
