Seven ways of creating objects in js

Keywords: Attribute Javascript Programming

  1. Factory model
function createPerson(name,age,obj){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.sayName=function(){
     alert(this.name);
  };
  return o;
}
var person1 = createPerson("hello",30,"soft Engineer");
var person2 = createPerson("world",39,"doctor");

The main feature is to use functions to encapsulate and create objects with specific interfaces. The function returns an object with three attributes and one method at a time. But at the same time, it does not solve the problem of object recognition, that is, how to know the type of an object.
2. Constructor pattern
Constructors can be used to create specific types of objects, and native constructors for Object and Array will automatically appear in the execution environment, and can define properties and methods of custom object types.

    function Person(name,age,job){//Constructors always start with uppercase letters rather than lowercase letters
       this.name = name;
       this.age = age;
       this.job = job;
       this.sayName = function(){
           alert(this.name);
         };
    }
    var person1=new Person("hello",29,"soft Engineer");
    var person2=new Person("world",30,"doctor");

Relative to person1 and person2, there are different instances of Person, and both objects have a constructor attribute, which points to Person. At the same time, the constructor is also a function, which can be called without the new operator. The this object of the function always points to the global object. You can also use call or apply() to call the Person() function.
The main drawback: Each method is recreated in each instance. Opening up space in the heap area will lead to different scoping chains and identifier resolution. Therefore, the function can be transferred to the outside of the constructor.

   function Person(name,age,job){
       this.name = name;
       this.age = age;
       this.job = job;
       this.sayName = sayName;
    }
    function sayName(){//Global attributes
        alert(this.name);
    };
    var person1=new Person("hello",29,"soft Engineer");
    var person2=new Person("world",30,"doctor"); 

The disadvantage of this method is that when an object needs to define more than one method, it creates more than one global function, so the custom application type is not encapsulated at all.
3. Prototype Model
Each function has a prototype attribute. Prototype is a pointer to an object whose purpose is to contain properties and methods that can be shared by all instances of a particular type. The advantage of using prototype objects is that all object instances can share all the attributes and methods it contains. Ordinary objects have only the _proto_attribute.

    function Person(){
    }
    Person.prototype.name = "hello";
    Person.prototype.age = 29;
            this.job = "Software Engineer";
    Person.prototype.sayName = function(){//Global attributes
        alert(this.name);
    };
    var person1=new Person();
    person1.sayName() //"hello"
    var person2=new Person(); 

Although the constructor is still called to create the magnification of the new object, and the new object will have the same attributes and methods, unlike the construction pattern, all attributes and methods of the new object are shared by instances.
About prototype object: Creating a new function creates a prototype attribute for the function, which points to the prototype object of the function. All prototype objects automatically get a container attribute, which points to a container attribute, which contains the pointer of the function where prototype is located. Through this constructor, attributes and methods can be added. At the same time, when the constructor is called to create a new instance, it will contain pointers that point to the prototype attributes of the constructor. This is the basic principle of sharing attributes and methods saved by prototypes among multiple object instances.
At the same time, isPrototypeOf() can be used to determine whether this relationship exists between objects. Determine whether there are internal pointers to the prototype. When an attribute is added to an instance, the same-name attribute stored in the prototype object is masked, and the instance attribute can be deleted and the prototype attribute can be re-accessed through the delete operator. HasOwn prototype () can detect whether an attribute is in an instance or in a prototype.
On the Dynamics of Prototype Objects - Loose Connections between Instances and Prototypes:

function Person(){
}
var friend=new Person();
Person.prototype={
   constructor:Person,
   name:"Nicloas",
   age:30,
   sayName:function(){
     alert(this.name);
   }
};
friend.sayName() //error

Calling the constructor adds a [[prototype]] attribute to the instance pointing to the prototype object, while changing the prototype to another object cuts off the relationship between the constructor and the original prototype. The pointer in the instance points to the prototype, not to the constructor.

4. Combining constructors and prototypes
Main idea: Constructors are used to define instance attributes, and prototype patterns are used to define methods and shared attributes. And the most widely used.

 function Person(name,age,job){         //Constructor Pattern
   this.name = name;
   this.age = age;
   this.job=job;
   this.friends=["hello","joe"];
}
Person.prototype={         //Prototype pattern
   constructor:Person,
   sayName:function(){
     alert(this.name);
   }
};
var person1 = new Person("helo",20,"doctor");
var person2 = new Person("hol",29,"engineer");

Main features: Instances created using constructors will not be shared, and those created through prototype patterns will be shared.

5. Dynamic prototype model
That is, by checking whether a method that should exist is valid, we can decide whether we need to initialize the prototype.

 function Person(name,age,job){         //Constructor Pattern
  this.name = name;
  this.age = age;
  this.job=job;
  this.friends=["hello","joe"];
  if(typeOf this.sayName!="function"){
     Person.prototype.sayName=function(){{         //Prototype pattern
          alert(this.name);
       }
    };
  }
var person1 = new Person("helo",20,"doctor");
 person.sayName(); 

6. Parasitic constructor pattern
The basic idea is to create a function that only encapsulates the code that creates the object and then returns the newly created object.

  function Person(name,age,job){         //Constructor Pattern
  var o=new Object();
  o.name = name;
  o.age = age;
  o.job = job;
  o.friends = ["hello","joe"];
  o.sayName = function(){        //Prototype pattern
          alert(this.name);
    };
    return o;
  }
 var person1 = new Person("helo",20,"doctor");
 person.sayName(); 

The object returned by the constructor has nothing to do with the prototype properties of the constructor.
7. Steady constructor model
Delegate objects refer to objects that do not have public attributes and whose methods do not refer to this. Unlike the parasitic constructor, one does not use the new call constructor, and the other is that the constructed instance object does not use this.

  function Person(name,age,job){         //Constructor Pattern
  var o=new Object();
  o.friends = ["hello","joe"];
  o.sayName = function(){        //Prototype pattern
          alert(name);
    };
    return o;
  }
 var person1 = Person("helo",20,"doctor");
 person.sayName(); 

All the above are taken from Javascript advanced programming.

Posted by Krazy-j on Thu, 20 Jun 2019 11:37:14 -0700