Summary of methods to create custom objects in Javascript_javascript tips

There are many ways to create objects in Javascript.

Object constructor/object literal:

Design patterns aside, the most basic method is to first call the Object constructor to create an object, and then add properties to the object.

Copy code The code 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 JavaScript object literals can change to a better way of writing, which at least looks more concise.

Copy code The code is as follows:

var student = {
         name: "xiao hong",
Age: 18,
          getName: function () {
alert(this.name);
}
};

Disadvantages: A disadvantage of the above method is that when using the same interface to create many similar objects, a large amount 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:

Factory pattern abstracts the specific process of creating objects. Just like a black box, as long as you call the function (enter the factory) and pass in the corresponding parameters (various raw materials), a corresponding object (product produced by the factory) will come out. Factory pattern solves the problem of creating multiple similar objects.

Copy code The code 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 disadvantages. The biggest disadvantage is the problem of object type recognition. It can only be determined that the object is of type Object (p1 instanceof Object), but it cannot be determined specifically which type it is. Students created using the factory pattern actually have similar properties and methods, but with different values. A better solution at this time is to create a Student function so that all objects belong to the Student type. So the factory pattern is not bad, it’s just that the constructor pattern is better.

Constructor of custom type:

Constructors can be used to create objects of specific types.

Copy code The code 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

Disadvantage: The disadvantage of custom constructor is that each object will recreate its own method. In fact, the functions of these methods are the same (like sayName), but they are not the same (p3.sayName and p4.sayName not equal).

Prototype mode:

Define an empty function, and then add all properties and methods to the prototype, so that all objects will share these properties and methods.

Copy code The code 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 will cause problems, such as: friends. Most of the friends of each classmate are different.

Combination of constructor and prototype:

Copy code The code 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 for creating custom types. It is also the best method among the above methods.

/*************************************************************************************************************/

In fact, there are many ways to create objects above, but there may still be some special scenarios that require continued optimization.

Dynamic Prototype Mode:

It is an optimization of the combination of constructor and prototype. For those shared properties and methods, if they are initialized, they do not need to be initialized again to improve efficiency.

Copy code The code 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 creating multiple student objects, the sayName method will only be initialized once.

Finally, there is a very useful way to create objects, which is the safe constructor.

Sure constructor pattern:

In this mode, the use of this and new is prohibited, and all objects have no public attributes. The value of a variable can only be read, not modified.

Copy code The code is as follows:

////Sure constructor pattern
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 methods of creating custom objects in Javascript. It is very comprehensive. If you have any better ideas, please contact me. This article will be continuously updated.