js Multiple Ways of Creating Objects and Summary of Their Advantages and Disadvantages

Directory Early Creation Mode Factory Mode Constructor Mode
Constructor pattern optimizes prototype pattern
Combination of constructor and prototype pattern Dynamic prototype pattern Parasitic constructor pattern Safe constructor pattern

Early creation method

var obj = new Object()
obj.name ='xxx'
obj.age = 18
 Or use object literals 
var o1 = {
  name: 'xxx',
  say: () => {}
}
var o2 = {
  name: 'xxx',
  say: () => {}
}

Disadvantages: Creating many objects with the same interface will produce a lot of duplicate code

Factory model

function factory(name,age) {
  var obj = new Object()
  obj.name = name
  obj.age = age
  return obj
}
var o1 = factory(1, 11)
var o2 = factory(2, 22)

Advantages: Solve the problem of duplicate code for creating multiple similar objects
Disadvantages: Unable to recognize what type of object it is

Constructor pattern

Constructors can be used in ECMAScript to create specific types of objects, such as native constructors such as Object and Array. In addition, you can create custom constructors to define the properties and methods of custom objects.

function Person(name, age) {
  this.name = name
  this.age = age
  this.sayName = function() {
    console.log(this.name)
  }
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

Advantages: The instance created by the constructor pattern can distinguish the type identification (instanceof judgment)
Disadvantages: Each method needs to be recreated on the instance, for example, the sayName method of two instances has the same task, but two Function instances are actually created

Constructor pattern optimization

function Person(name, age) {
  this.name = name
  this.age = age
}
function sayName () {
  console.log(this.name)
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

Advantage: Multiple instances share the function defined in the global scope, which solves the problem that two functions do the same thing
Disadvantages: The function defined by global scope can only be called by a certain object in fact, the global scope is not worthy of the name, and if the object needs to define many methods, it needs to create many global functions, which makes the custom object type have no encapsulation characteristics.

Prototype pattern

Each function we create has an protoype property, which is a pointer 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. That is, prototype is the prototype object of the object instance created by the constructor.

function Person(){}
Person.prototype.name = '123'
Person.prototype.age = 18
Person.prototype.sayName = function() {
  console.log(this.name)
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 123
o2.sayName() // 123

Advantages: Solves the problem of instances sharing attributes or events
Disadvantages: For attributes of reference type, modifications to one instance cause other instances to access values because instances share properties. Such as:

function Person(){}
Person.prototype.name = '123'
Person.prototype.age = 18
Person.prototype.friends = ['a', 'b']
Person.prototype.sayName = function() {
  console.log(this.name)
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.friends.push('c')
console.log(o2.friends) // ['a', 'b', 'c']

Constructor and prototype pattern combination

function Person(name, age) {
  this.name = name
  this.age = age
  this.friends = ['a']
}
Person.prototype = {
  constructor: Person,
  sayName: function() {
    console.log(this.name)
  }
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

Advantages: Each instance has its own attributes, and at the same time, it shares the reference of methods and supports passing parameters

Dynamic prototype mode

function Person(name, age) {
  this.name = name
  this.age = age
  this.friends = ['a']
  if(typeof this.sayName != 'function') {
    Person.prototype.sayName = function() {
      console.log(this.name)
    }
  }
}
var o1 = new Person(1,11)
var o2 = new Person(2,22)
o1.sayName() // 1
o2.sayName() // 2

Advantages: Only create once when the method does not exist, avoiding repeated creation

Parasitic constructor pattern

function SpecialArray() {
  var o = new Array()
  //  Add value 
  o.push.apply(o, arguments)
  //  Adding method 
  o.toPipedString = function(){
    return this.join('|')
  }
  return o
}
var o1 = new SpecialArray(1,11)
o1.toPipedString() // 1|11

Advantage: Add special methods to objects without changing the original constructor
Disadvantages: The returned object has nothing to do with the constructor and the prototype of the constructor, and this method is no different from the object created outside the constructor

Robust constructor pattern

function Person(name) {
  var o = new Object()
  //  Adding method 
  o.getName = function(){
    return name
  }
  return o
}
var o1 = new Person(1)
o1.getName() // 1

Unlike the parasitic constructor, it does not use this and does not use new to call
Advantages: There is no way to access name except using getName, which can be used in 1 secure environment
Disadvantages: Similar to factory mode, the type to which the object belongs cannot be recognized

The above is the js to create objects in a variety of ways and advantages and disadvantages of summary of the details, more about js to create objects, please pay attention to other related articles on this site!