Summary of Object Creation Methods in JavaScript Advanced Programming

Factory model

function Person() {
  var o = new Object();
  o.name = 'hanmeimei';
  o.say = function() {
    alert(this.name);
  }
  return o;
}
var person1 = Person();

Advantage:

  • It's easy to understand.

Disadvantages:

  • It is impossible to identify objects by constructor, assuming that they are all from Object and that they are from Person.
  • Every time an object is created through Person, all say methods are the same, but they are stored many times and waste resources.

Constructor Pattern

function Person() {
  this.name = 'hanmeimei';
  this.say = function() {
    alert(this.name)
  }
}
var person1 = new Person();

Advantage:

  • Classification of object instances can be identified by constructor or instanceof
  • Object instances can be created by new keywords, more like object instances in OO language

Disadvantages:

  • Say methods for multiple instances achieve the same effect, but they are stored many times (two object instances have different say methods because of different storage addresses).

Be careful:

  • The constructor pattern implicitly tries to return this at the end, so in the absence of new, attributes and methods will be added to the global object, and the browser side will be added to the window object.
  • call or apply can also be called to specify this based on the characteristics of return this. This will be of great help in the subsequent inheritance.

Prototype pattern

function Person() {}
Person.prototype.name = 'hanmeimei';
Person.prototype.say = function() {
  alert(this.name);
}
Person.prototype.friends = ['lilei'];
var person1 = new Person();

Advantage:

  • The say method is shared, and all instances of the say method point to the same.
  • It can dynamically add methods and attributes of prototype objects, and directly reflect them on object instances.
var person1 = new Person()
Person.prototype.showFriends = function() {
  console.log(this.friends)
}
person1.showFriends()  //['lilei']

Disadvantages:

1. Problems may arise in the case of references, as shown in the following code:

var person1 = new Person();
var person2 = new Person();
person1.friends.push('xiaoming');
console.log(person2.friends)  //['lilei', 'xiaoming']

Because js assigns addresses to reference types by storing them in variables, the friends attributes of person1 and person2 point to the same storage area.

2. The first time we call the say method or name attribute, we will search twice. The first time we look for the say method on the instance. If we don't find it, we will look for the say method on the Person. prototype. When we find it, we will add these method or attributes on the strength.
3. All methods are shared. There is no way to create an instance's own attributes and methods, nor to pass parameters like constructors.

Be careful:

Advantages 2. There is a problem that the constructor changes when the literal value of the object is directly assigned to Person.prototype, so it needs to be set manually. Secondly, the literal value of the object is assigned to Person.prototype, which will not work on the object instance created before.

    var person1 = new Person()
    Person.prototype = {
        name: 'hanmeimei2',
          setName: function(name){
          this.name = name
          }
    }
    person1.setName()   //Uncaught TypeError: person1.set is not a function(...)

This is because object instances and object prototypes are linked directly through a pointer, which is an internal property [[Prototype], and can be accessed through _proto_. We modify the address pointed to by Person.prototype through object literal quantities, but the _proto_ of the object instance is not updated with it, so this leads to that the instance also accesses the original Person.prototype, so it is recommended not to change the Person.prototype attribute in this way.

Dynamic prototype model

function Person(name) {
  this.name = name
  if(typeof this.say != 'function') {
    Person.prototype.say = function(
    alert(this.name)
  }
}
var friend = new Person("jjc")
friend.say()

Constructor and Prototype Combination Patterns

function Person(name) {
  this.name = name
  this.friends = ['lilei']
}
Person.prototype.say = function() {
  console.log(this.name)
}
var person1 = new Person('hanmeimei')
person1.say() //hanmeimei

Advantage:

  • Solves the drawbacks of prototype schema for reference objects
  • It solves the disadvantage that the prototype mode can not transfer parameters.
  • It solves the disadvantage that constructor patterns cannot share methods.

Parasitic constructor pattern

function Person(name) {
  var o = new Object()
  o.name = name
  o.say = function() {
    alert(this.name)
  }
  return o
}
var peron1 = new Person('hanmeimei')

Steady tectonic model

function Person(name) {
  var o = new Object()
  o.say = function() {
    alert(name)
  }
}
var person1 = new Person('hanmeimei');
person1.name  // undefined
person1.say() //hanmeimei

Advantage:

  • Security, then, seems to be a private variable that can only be accessed through the say method

Keywords: Javascript Attribute

Added by irwa82 on Fri, 09 Aug 2019 11:50:07 +0300