There are many ways to create objects in Javascript.
Object constructor/object literal :
Putting aside the design pattern, the most basic method is to first call the Object constructor to create an object, and then add attributes to the object.
The code copy is as follows:
var student = new Object();
student.name = "xiao ming";
student.age = 20;
student.getName = function () {
alert(this.name);
}
Students who are familiar with the literal javascript object can change to a better way of writing, at least it looks more concise.
The code copy is as follows:
var student = {
name: "xiao hong",
age: 18,
getName: function () {
alert(this.name);
}
};
Disadvantages: One of the disadvantages of the above method is that when using the same interface to create many similar objects, a large number of duplicate code will be generated. This should be easy to understand. Functions (methods or classes) are generally used to create public methods. The above object creation process has no shadow of functions at all, so there is no reuse.
Factory mode :
The factory pattern abstracts the process of creating a concrete object. Just like a black box, you just need to call the function (enter the factory) and pass in the corresponding parameters (various raw materials), and a corresponding object (product produced by the factory) will come out. Factory pattern solves the problem of creating multiple similar objects.
The code copy is as follows:
function studentFactory(name,age) {
var student = new Object();
student.name = name;
student.age = age;
student.sayName = function () {
alert(this.name);
}
return student;
}
var p1 = studentFactory("ming", 20);
var p2 = studentFactory("hong", 18);
Disadvantages: The factory pattern also has its disadvantages, and the biggest disadvantage is the issue of object type recognition. It can only be determined that the object is of Object type (p1 instanceof Object), but it is impossible to determine which type it is. Students created using factory mode actually have similar properties and methods, but the values are different. A better solution at this time is to create a Student function so that all objects belong to the Student type. So the factory mode is not bad, but the constructor mode is better.
Custom type constructor:
Constructors can be used to create objects of a specific type.
The code copy is as follows:
function Student(name,age) {
this.name = name;
this.age = age;
this.sayName = function () {
alert(this.name);
}
}
var p3 = new Student("ming", 20);
var p4 = new Student("hong", 18);
alert(p3 instanceof Student);
alert(p3.sayName==p4.sayName); //false
Disadvantages: The disadvantage of custom constructors is that each object will recreate its own method. In fact, these methods have the same function (like sayName), but they are not the same (p3.sayName and p4.sayName are not equal).
Prototype mode:
Define an empty function and add all properties and methods to the prototype so that all objects share these properties and methods.
The code copy is as follows:
function Student() {};
Student.prototype.name = "ming";
Student.prototype.age = 20;
Student.prototype.friends = ['qi'];
Student.prototype.sayName = function () {
alert(this.name);
};
Disadvantages: Some attributes cannot be shared, and sharing them brings problems, such as: friends. Most of the friends of each student will not be the same.
Combination of constructor and prototype:
The code copy is as follows:
function Student(name, age, friends) {
this.name = name;
this.age = age;
this.friends = friends;
}
Student.prototype = {
constructor: Student,
sayName: function () {
alert(this.name);
}
};
Summary: The combination of constructors and prototypes is a widely recognized method of creating custom types. It is also the best method among the above methods.
/************************************************************************************************************/
In fact, there are already many methods to create objects above, but there are still some special scenarios that require continued optimization.
Dynamic prototype mode:
It is an optimization of the combination of constructors and prototypes. For those common attributes and methods, if initialized, there is no need to repeat the initialization to improve efficiency.
The code copy is as follows:
function Student(name, age) {
this.name = name;
this.age = age;
if ((typeof this.sayName) != "function") {
Student.prototype.sayName = function () {
alert(this.name);
}
}
}
var stu = new Person("ming", 20);
//alert(stu instanceof Student);
stu.sayName();
var stuNew = new Person("hong", 18);
//alert(stuNew instanceof Student);
stuNew.sayName();
When multiple student objects are created, the sayName method is initialized only once.
Finally, there is another very useful way to create objects, which is to safely construct the functions.
Stable constructor pattern:
This and new are prohibited in this mode, and all objects have no public attributes. Only the value of the variable is read, but not modified.
The code copy is as follows:
////Stafe constructor mode
function Student(name, age) {
var o = new Object();
o.sayName = function () {
alert(name);
}
return o;
}
var stu = Student("ming", 21);
stu.sayName();
The above summarizes several common Javascript methods to create custom objects, which are very comprehensive. If you have any better ones, please contact me. This article continues to be updated.