Home>

The syntax of js is very flexible,There are several different methods for simple object creation.These overly flexible places can sometimes be confusing,So today we will comb through several methods of creating objects commonly used in js

Foreword

Although using the object constructor or using object literals can be very handy for creating an object,However, this method has a significant disadvantage:creating multiple objects with one interface generates a lot of redundant code.So in order to solve this problem,People started using the following ways to common objects.

Factory mode

This pattern abstracts the specific process of creating objects,Details of using functions to create 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 ("Qian Long", "Male", "100");
 p1.show ();
 var p2=cperson ("Hina", "Female", "14");
 p2.show ();

Factory mode test

The problem with the factory approach:using the factory pattern creates an object that contains all the information,This function can be called countless times.Although it solves the problem of creating multiple similar objects,But 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) {//Note here that the first letter of the constructor is capitalized
 this.name=name;
 this.sex=sex;
 this.age=age;
 this.show=function () {
 console.log (this.name, this.age, this.sex);
 }
}
var p1=new cperson ("Qian Long", "Male", "100");
 p1.show ();
var p2=new cperson ("Hina", "Female", "14");
 p2.show ();

Constructor pattern test

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

Constructor capitalization

Objects are not created explicitly

Assigned properties and methods to this object

No return statement

And calling the constructor in this way will go through a few 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 (ie the process of adding properties and methods to the new object)

Return object

Note:The constructor is not much different from a normal function.The only difference is in the way it is called.The following shows the different calling methods

//call method 1 new method
 var p1=new cperson ("Qian Long", "Male", "100");
 p1.show ();//Qianlong 100 male
 //call method 2 ordinary function call
 cperson ("Qian Long", "Male", "100");
 window.show () //Qianlong 100 male Note that the properties and methods will be set on the window object
 //call method 3 is called in the scope of another object
 var obj=new object ();
 cperson.call (obj, "Qianlong", "Male", "100");
 obj.show ();//Qianlong 100 male in the scope of obj

The problem with constructors:The main problem with using constructors is that each method must be recreated on each instanceBoth p1 and p2 have show methods, but they are not instances of the same function, because functions are also objects in js.So the show methods they share are not equal.

Prototype mode

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

The benefit is a method that allows all instances of an object to share its properties.I.e. no need to define instance information in the constructor

function cperson () {
}
cperson.prototype.name="Qianlong";
cperson.prototype.sex="Male";
cperson.prototype.age=100;
cperson.prototype.show=function () {
 console.log (this.name, this.age, this.sex);
}
var p1=new cperson ();
 p1.show ();//Qianlong 100 male
var p2=new cperson ();
 p2.show ();//Qianlong 100 male
 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 everyone likes it.

  • Previous Java method to determine whether a string is a number
  • Next How to use jquery UI Datepicker time control (enhanced version)