Home>

[1] Using the object constructor

[Disadvantage] Use the same interface to create many objects,Will generate a lot of duplicate code

var person=new object ();
  person.name="nicholas";
  person.age=29;
  person.job="software engineer";
  person.sayname=function () {
  Alert (this.name);
}

[2] Using object literals

[Disadvantage] Use the same interface to create many objects,Will generate a lot of duplicate code

var person={
  name:"nicholas",  age:29,  job:"software engineer",  sayname:function () {
    alert (this.name);
  }
};

[3] Factory pattern:abstracts the process of creating specific objects,Considering that classes cannot be created in ecmascript,The developer invented a function,Use functions to encapsulate the details of creating an object with a specific interface

Disadvantage [Cons] solves the problem of creating multiple similar objects,But did not solve the problem of object recognition

function createperson (name, age, job) {
  var o=new object ();
  o.name=name;
  o.age=age;
  o.job=job;
  o.sayname=function () {
    alert (this.name);
  }
  return o;
}
var person1=createperson ("nicholas", 29, "software engineer");
var person2=createperson ("greg", 27, "doctor");

[4] Constructor pattern:no object is explicitly created,Assign properties and methods directly to this object, no return statement

[Disadvantage] Each method must be recreated on each instance

function person (name, age, job) {
  this.name=name;
  this.age=age;
  this.jog=job;
  this.sayname=function () {
    alert (this.name);
  };
  //It is logically equivalent to the declared function
  //this.sayname=new function ("alert (this.name)");
}
var person1=new person ("nicholas", 29, "software engineer");
var person2=new person ("greg", 27, "doctor");

[4.1] Constructor expansion mode:transfer function definitions outside the constructor

[Disadvantage 1] Functions defined in the global scope can actually only be called by an object,This makes the global scope a bit misleading

[Disadvantage 2] If the object needs to define many methods,You need to define many global functions,This custom reference type has no encapsulation at all

function person (name, age, job) {
  this.name=name;
  this.age=age;
  this.job=job;
  this.sayname=sayname;
}
function sayname () {
  alert (this.name);
}
var person=new person ("Little Match", "20", "student")
person.sayname ();
console.log (person);

[5] Prototype mode:Each function we create has a prototype property. This property is a pointer.Pointing 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.If understood literally,prototype is the prototype object of the object instance created by calling the constructor

function person () {
  person.prototype.name="nicholas";
  person.prototype.age=29;
  person.prototype.job="software engineer";
  person.prototype.sayname=function () {
    alert (this.name);
  }
}
var person1=new person ();
person1.sayname ();//"nicholas"
var person2=new person ();
person2.sayname ();//"nicholas"
alert (person1.sayname == person2.sayname);//true

[5.1] Simpler prototype mode:To reduce unnecessary input,In order to better encapsulate the functionality of the prototype visually,Rewrite the entire prototype object with an object literal containing all properties and methods.

[Disadvantage] Resetting the constructor property in this way will cause its [[enumerable]] property to be set to true, the native constructor property is not enumerable by default

function person () {};
person.prototype={
  constructor:person,  name:"nicholas",  age:29,  job:"software engineer",  sayname:function () {
    alert (this.name);
  }
};

[5.2] Prototype pattern for solving enumerable problems

function person () {};
person.prototype={
  name:"nicholas",  age:29,  job:"software engineer",  sayname:function () {
    alert (this.name);
  }
};
object.defineproperty (person.prototype, "constructor", {
  enumerable:false,  value:person
});

[Prototype pattern disadvantage 1] Rewriting the prototype object cuts off the connection between the existing prototype and the existing object instance,They still reference the original prototype.

function person () {}
var friend=new person ();
person.prototype={
  constructor:person,  name:"nicholas",  age:29,  job:"software engineer",  sayname:function () {
    alert (this.name);
  }
};
friend.sayname ();//error

[Prototype Pattern Disadvantage 2] The sharing problem of reference type attributes is prominent

function person () {}
person.prototype={
  constructor:person,  name:"nicholas",  age:29,  job:"software engineer",  friend:["shelby", "court"],  sayname:function () {
    alert (this.name);
  }
};
var person1=new person ();
var person2=new person ();
person1.friends.push ("van");
alert (person1.friends);//["shelby", "court", "van"];
alert (person2.friends);//["shelby", "court", "van"];
alert (person1.friends === person2.friends);//true

[6] Combination mode:The combination of constructor mode and prototype mode is the most common way to create custom types.The constructor pattern is used to define instance properties,The prototype pattern is used to define methods and shared attributes.This hybrid mode also supports passing parameters to the constructor,Is a default mode for defining reference types

function person (name, age, job) {
  this.name=name;
  this.age=age;
  this.job=job;
  this.friends=["shelby", "court"];
}
person.prototype={
  constructor:person,  sayname:function () {
    alert (this.name);
  }
}
var person1=new person ("nicholas", 29, "software engineer");
var person2=new person ("greg", 27, "doctor");
person1.friends.push ("van");
alert (person1.friends);//["shelby", "court", "van"];
alert (person1.friends);//["shelby", "court"];
alert (person1.friends === person2.friends);//false
alert (person1.sayname === person2.sayname);//true

[7] Dynamic prototype mode:Encapsulate all information in the constructor,By initializing the prototype in the constructor (only if necessary), the advantages of using both the constructor and the prototype are maintained.in other words,You can check if an existing method works,To decide whether to initialize the prototype.

note [Note] When using dynamic prototype mode,You cannot use object literals to rewrite the prototype.If you rewrite the prototype with an instance already created,Then the connection between the existing instance and the new instance will be cut off

function person (name, age, job) {
  //Attributes
  this.name=name;
  this.age=age;
  this.job=job;
  //method
  if (typeof this.sayname!="function") {
    person.prototype.sayname=function () {
      alert (this.name);
    };
  }
}
var friend=new person ("nicholas", 29, "software engineer");
friend.sayname ();

[8] Parasitic constructor pattern:create a function,The function is just to encapsulate the code that creates the object,Then return to the newly created object

function person (name, age, job) {
  var o=new object ();
  o.name=name;
  o.age=age;
  o.job=job;
  o.sayname=function () {
    alert (this.name);
  };
  return o;
}
var friend=new person ("nicholas", 29, "software engineer");
friend.sayname ();//"nicholas"

[Application of parasitic constructor pattern] Create a special array with additional methods.Since the array constructor cannot be modified directly,So you can use this pattern

function specialarray () {
  //Create array
  var values ​​= new array ();
  //Add value
  values.push.apply (values, arguments);
  //Add method
  values.topipedstring=function () {
    return this.join ("|");
  };
  //return the array
  return values;
}
var colors=new specialarray ("red", "blue", "green");
alert (colors.topipedstring ());//"red | blue | green"

[9] Prudent Constructor Mode:The so-called prudent object means that it has no public attributes.And its methods do not reference this's object. The prudent object is best used in some secure environments (these environments will prohibit the use of this and new) or when preventing data from being altered by other applications.

function person (name, age, job) {
  //Create the object to be returned
  var o=new object ();
  //You can define private variables and functions here
  //Add method
  o.sayname=function () {
    alert (name);
  };
  //return object
  return o;
}
//In the object created in safe mode,In addition to using the sayname () method,No other way to access the value of name
var friend=person ("nicholas", 29, "software engineer");
friend.sayname ();//"nicholas"
  • Previous Detailed service instance of the four major components of Android
  • Next Example analysis of the basic points of music player application development in iOS