Detailed explanation of how JavaScript uses factory mode, constructor mode, and prototype mode to create object instances

Although it is very convenient to create an object using the Object constructor or using object literals, this method has an obvious disadvantage: using an interface to create multiple objects will produce a lot of redundant code. . Therefore, in order to solve this problem, people began to use the following methods to common objects.

Factory pattern

This pattern abstracts the specific process of creating objects and uses functions to create the details of objects with specific interfaces

 function cPerson(name,sex,age){
 var o = new Object();
 o.name = name;
 o.sex = sex;
 o.age = age;
 o.show = function(){
 console.log(this.name,this.age,this.sex);
 }
 return o;
}
 var p1 = cPerson('龙','男','100');
 p1.show();
 var p2 = cPerson('田','女','14');
 p2.show();

Factory mode test

Problems with the factory method: Using the factory mode can create an object containing all information, and this function can be called countless times. Although it solves the problem of creating multiple similar objects, it does not solve the problem of object identification (that is, how to know the type of an object)

Constructor Pattern

function CPerson(name,sex,age) {//注意这里 构造函数首字母大写
 this.name = name;
 this.sex = sex;
 this.age = age;
 this.show = function () {
 console.log(this.name, this.age, this.sex);
 }
}
var p1 = new CPerson('龙','男','100');
 p1.show();
var p2 = new CPerson('田','女','14');
 p2.show();

Constructor pattern test

Note that the constructor is slightly different from the factory pattern, as follows

The first letter of the constructor is capitalized

The object is not created explicitly

The properties and methods are assigned to this object

There is no return statement

And the constructor is called in this way The function will roughly go through several steps

Create a new object

Assign the scope of the constructor to this object (so this points to this object)

Execute the code in the constructor (that is, the process of adding properties and methods to a new object)

Return the object

Note: The constructor is actually not much different from an ordinary function, the only difference The difference lies in the calling method. The following demonstrates several different calling methods

 // 调用方式1 new 方式
 var p1 = new CPerson('龙','男','100');
 p1.show();//龙 100 男
 // 调用方式2 普通函数调用
 CPerson('龙','男','100');
 window.show()//龙 100 男 注意属性和方法会被设置到window对象上
 // 调用方式3 在另一个对象的作用域中调用
 var obj = new Object();
 CPerson.call(obj,'龙','男','100');
 obj.show(); //龙 100 男 在obj的作用域

Problems with constructors: The main problem with using constructors is that each method must be recreated on each instance , both p1 and p2 have show methods, but they are not instances of the same Function, because function is also an object in js. Therefore, their shared show methods are not equal.

Prototype pattern

Each function has a prototype attribute, which is a pointer pointing to an object. The purpose of this object is to contain properties and methods that can be shared by all instances of a specific type. That is, the prototype object of the object created by calling the constructor

The advantage is that all instances of the object can share its attributes. That is, there is no need to define the instance information in the constructor

 function CPerson(){
}
CPerson.prototype.name='龙';
CPerson.prototype.sex='男';
CPerson.prototype.age=100;
CPerson.prototype.show=function(){
 console.log(this.name, this.age, this.sex);
}
var p1 = new CPerson();
 p1.show(); //龙 100 男
var p2 = new CPerson();
 p2.show();//龙 100 男
 console.log(p1.show == p2.show)//true

The above is the detailed content of Detailed explanation of how JavaScript uses factory mode, constructor mode, and prototype mode to create object instances. For more information, please follow other related articles on the PHP Chinese website!