Summary of various ways to create objects in js and their advantages and disadvantages

Early creation method

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

Disadvantages: Using the same interface to create many objects will generate a lot of duplicate code

Factory Pattern

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 code duplication problem of creating multiple similar objects Disadvantages: Unable to identify what type of object

Constructor Pattern

Constructors can be used in ECMAScript to create objects of specific types, such as native constructors such as Object and Array. In addition, you can create custom constructors to define 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: Instances created by the constructor mode can distinguish type identifiers (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 actually creates two Function instances.

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

Advantages: Multiple instances share functions defined in the global scope, solving the problem of two functions doing the same thing. Disadvantages: Functions defined in the global scope can actually only be called by a certain object, the global scope name is not worthy of its name, and if an object needs to define many methods, many global functions need to be created, which makes the custom object type have no encapsulation characteristics.

Prototype Pattern

Each function we create has a prototype 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: Solve the problem of instance sharing properties or events. Disadvantages: Because instances share properties, for properties whose values ​​are reference types, modifications to one instance will cause changes to the values ​​accessed by other instances. like:

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']

Combination of Constructor and Prototype Patterns

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 properties, and at the same time shares the method reference, and also supports parameter passing

Dynamic Prototype Pattern

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: Create only 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)
  // Add method o.toPipedString = function(){
    return this.join('|')
  }
  return o
}
var o1 = new SpecialArray(1,11)
o1.toPipedString() // 1|11

Advantages: Add special methods to an object without changing the original constructor Disadvantages: The returned object has no relationship with the constructor and the constructor's prototype, the method is no different from an object created outside the constructor

Safe Constructor Pattern

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

Unlike parasitic constructors, this and new calls are not used. Advantages: There is no way to access name except getName, so it can be used in some safe environments. Disadvantages: Similar to the factory pattern, it is impossible to identify the type of the object.

The above is the detailed content of the various ways to create objects in js and the summary of their advantages and disadvantages. For more information about creating objects in js, please pay attention to other related articles on 123WORDPRESS.COM!