On the method of creating JavaScript Object _javascript Skill

First, the factory model

function Person (name,age) {
  var p=new Object ();
  P.name=name;
  P.age=age;
  P.showmessage=function () {
    console.log ("Name:" +this.name+ "Age:" +this.age);
  }
  return p;
}
var P1=person ("K1");
var P2=person ("K2");
Console.log (p1.showmessage==p2.showmessage);//false is not the same ShowMessage method
Console.log (p1.constructor);//[ Object] are all object

The defect of the factory pattern is that the problem of object recognition is not resolved, and the ShowMessage method of each object is not the same method (each method is recreated on each object instance), and the overhead is increased

Second, the construction function pattern

function Person (name,age) {
  this.name=name;
  This.age=age;
  This.showmessage=function () {
    console.log ("Name:" +this.name+ "Age:" +this.age);
  }
var p1=new person ("K1");
var p2=new person ("K2");
Console.log (p1.showmessage==p2.showmessage);//false is not the same ShowMessage method
Console.log (p1.constructor);//[ Person]
Console.log (P1 instanceof person);/true

The constructor pattern solves the problem of object recognition, but the ShowMessage method of each object is not the same method (each method is recreated on each object instance), increasing the overhead

Third, prototype model

function person () {
  
}
Person.prototype.name = "K";
Person.prototype.age =29;
Person.prototype.showmessage=function () {
  console.log ("Name:" +this.name+ "Age:" +this.age);

var p1=new person ();
P1.showmessage ();//name:k age:29

var p2=new person ();
P2.showmessage ();//name:k age:29

Console.log (p1.showmessage==p2.showmessage);/true--refers to the same function
Console.log (P1.constructor)//[person]--Object recognition
Console.log (P1 instanceof person)//true--Object recognition
Console.log ( Person.prototype.isPrototypeOf (p1));/True
Console.log (object.getprototypeof (p1) ==person.prototype); True

The prototype model solves the problem of "each method recreated again on each object instance" and solves the problem of object recognition.

A big problem with the prototype pattern is that all the objects, variables, functions that are mounted under the function prototype are shared by all instances of the function, although prototype properties can be accessed through instance P1, P2, but cannot modify property values such as P1.name= "K1 ", just added a name=" K1 "attribute to the P1 instance and did not change to Prototype.name. If the value type is OK, if it is a reference type, there will be a problem, look at the following example

function person () {  
};
Person.prototype.age =10;
person.prototype.array=[1,2,3];

var p1=new person ();
var p2=new person ();
Console.log (P1.array)//[1,2,3]
console.log (P2.array);//[1,2,3]
P1.array.push (4)
; Console.log (P1.array);//[1,2,3,4]
console.log (P2.array);//[1,2,3,4]

P1 added a value to the array, which is reflected in the P2 as they all point to the same array

Combined use of constructor patterns and prototype patterns

This is the most common way to create objects, combining the advantages of constructors and prototype schemas

function Person (name,age) {
  this.name=name;
  this.age=age;
}

Person.prototype.showMessage = function () {
  console.log ("Name:" +this.name+ "Age:" +this.age);

var p1=new person ("K");
P1.showmessage ();

V. Dynamic PROTOTYPE Model

The main solution: all the information is encapsulated in the constructor, more in line with the idea of OO

function Person (name,age) {
  this.name=name;
  This.age=age;
  if (typeof this.showmessage!= "function") {
    person.prototype.showmessage=function () {
      console.log ("Name:" + This.name+ "Age:" +this.age);

}} var p1=new person ("K");
P1.showmessage ();

Six, parasitic constructor function pattern

function Person (name,age) {
  var o=new Object ();
  O.name=name;
  O.age=age;
  O.sayname=function () {
    console.log (this.name);
  };
  return o;
}
var p1=new person ("K");
P1.sayname ();

The parasitic constructor pattern is identical to the factory pattern, except that the new keyword is used when the object was created, as in the example: Var p1=new person ("K", 28).

Its main function is to extend the function within this constructor, for example, I want to define an array type MyArray, which is based on array arrays, has a method of its own, as follows

function MyArray () {
  var values=new Array ();
  Values.push.apply (values,arguments);
  The method defined by itself
  values.topipedstring=function () {return 
    this.join (' | ');
  };
  return values;
}
var colors=new myarray ("Red", "Blue", "green");
Console.log (Colors.topipedstring ());
Console.log (colors instanceof Array);

Seven, the SAFE structure function pattern

A secure constructor follows a pattern with a parasitic constructor type, but has two different points: first, do not use this, and the second is to call the constructor without using new

function Person (name,age) {
  var o=new Object ();
  var tempage=age;

  O.name=name;
  O.age=age;

  O.sayname=function () {
    console.log (name);
  }
  O.sayage=function () {
    console.log (tempage);
  }
  return o;
}

var P1=person ("K1");
P1.sayname (); K1
p1.sayage ();

p1.name= "K2";
p1.age=30;
P1.sayname (); K1
p1.sayage ();  28

See such as the output is very good to understand what is called the Secure object mode, is the object created in this pattern, there is no other way to change the initialization of the value passed in, this is the person ("K1", 28), so the object is a safe object, In fact, this is where JavaScript closures are used.

The above analysis of the creation of JavaScript objects is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.