Several common ways to create objects in js object-oriented (factory mode, constructor mode, prototype mode)_javascript skills

In the last article, I introduced you to the javascript object-oriented basics. This article continues to learn more about javascript object-oriented. The syntax of JS is very flexible. There are several different methods for simple object creation. . These overly flexible places are indeed confusing sometimes, so today we will sort out several methods commonly used to create objects in JS.

Foreword

Although using the Object constructor or using object literals can be very convenient to create an object, 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 Mode

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 that contains all the 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 recognition (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

No object created explicitly

Assign properties and methods to this object

No return statement

And calling the constructor in this way 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 object

Note: The constructor is actually not much different from an ordinary function. The only 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 in It is also an object in js. Therefore, their shared show methods are not equal.

Prototype Mode

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 an object can share its property methods. 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 content is about several common ways to create objects in js object-oriented (factory mode, constructor mode, prototype mode), I hope you like it.