JS object-oriented common ways to create objects (Factory mode, constructor pattern, prototype mode) _javascript techniques

In the previous article to introduce the JavaScript object-oriented Foundation, this article continues to delve into JavaScript object-oriented, JS syntax is very flexible, simple object creation there are several different methods. These are too flexible places are sometimes very confusing, then today we will comb the JS commonly used to create the object of several methods bar.

Objective

While using the object constructor, or the literal volume of objects, can be handy for creating an object, there is an obvious drawback: using an interface to create multiple objects produces a lot of redundant code. So in order to solve this problem, people begin to use the following several ways to common objects.

Factory mode

This pattern abstracts the specific process of creating an object, using functions to create the details of an object with a specific interface

 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 (' Modest dragon ', ' Male ', ' m ');
 P1.show ();
 var P2 = CPerson (' Young Tian ', ' female ', ') ';
 P2.show ();

Factory mode Test

Factory-style problem: Using Factory mode to create an object that contains all the information can be invoked 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) {//Note 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 (' Modest dragon ', ' Male ', ' m ');
 P1.show ();
var P2 = new CPerson (' Young Tian ', ' female ', ' ');
 P2.show ();

Constructor pattern Test

Note that there are some differences between constructors and factory patterns, as follows

Initial capital letter of the constructor

object is not explicitly created

Assigning properties and methods to the This object

No return statement

And calling the constructor in this way will go through a few steps.

To create a new object

Assigns the scope of the constructor to this object (so this is pointing to this object)

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

Return object

Note: The constructor is not much different from the normal function, but the only difference is the way it is invoked. here are some different ways of calling

 Call mode 1 New Way
 var p1 = new CPerson (' Modest dragon ', ' Male ', ' m ');
 P1.show ()//modest Dragon 100 male
 //Call Mode 2 ordinary function call
 CPerson (' Modest dragon ', ' Male ', ', ');
 Window.show () 100 male note the properties and methods are set to the Window object
 //Call mode 3 call
 var obj = new Object () in the scope of another object;
 Cperson.call (obj, ' modest dragon ', ' Male ', ' m ');
 Obj.show (); Modest Dragon 100 male in the scope of obj

The problem with constructors: the main problem with constructors is that each method is recreated on each instance, P1 and P2 have a show method, but not an instance of the same function, because the function is also an object in JS. So the show method they share is not equal.

Prototype mode

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

The benefit is the method that allows instances of all objects to share his attributes. That is, you do not need to define the instance's information in the constructor

 function CPerson () {
}
cperson.prototype.name= ' modest dragon ';
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 (); Modest Dragon 100 male
var p2 = new CPerson ();
 P2.show () 100 male
 console.log (p1.show = = p2.show)//true

The above content is about JS object-oriented common creation of several ways (Factory mode, constructor mode, prototype mode), I hope you like.