More and more feel how convenient it is to stand on the shoulders of giants to learn, and more and more feel that the front-end content is broad, need to learn a lot of things, work hard! To fight for the life you want to be a qualified code farmer.

The singleton pattern

  • Singleton mode is to play the role of grouping, for example, in a large project, many front-end staff to develop, this time can be divided into several functional modules, different people write different modules, finally combined is modular development.
// Singleton mode
var person1 ={
  name:'Joe'.age:54.showName:function () {
    console.log("Name:"+this.name);
  },
  showAge:function () {
    console.log("Age:"+this.age); }}var person2 ={
  name:'bill'.age:20.showName:function () {
    console.log("Name:"+this.name);
  },
  showAge:function () {
    console.log("Age:"+this.age);
  }
}

person1.showName();
person2.showName();

Copy the code
  • The disadvantages are also obvious: it can solve the problem of grouping, but it can’t solve the problem of batch generation, the code repeatability is low, and the code redundancy is high after multiple objects.

Factory model (mass production of things as the name implies)

  • Putting the same code that does the same thing into the same function and executing the function to achieve this function is called factory mode, also known as “function encapsulation”, which is also “low coupling, high cohesion”, so as to reduce page redundancy and improve code reuse.
function createPerson(name,age){
  var person =new Object(a);// Create a new object
   / / the raw material
  person.name = name;
  person.age = age;
   / / processing
  person.showName = function(){
    console.log("Name:"+this.name);
  }
  person.showAge = function(){
    console.log("Age:"+this.age);
  }
  / / the factory
  return person;
}

var p1 = createPerson("Zhang".45);
var p2 = createPerson("Bill".20);

p1.showName();
p2.showName();
console.log(p1.showName==p2.showName); //false

Copy the code
  1. Normally we create objects by new, such as new Date(), which uses method creation. (var p1=createPerson(” user “,45)) Using new to create a person simplifies some of the code and also introduces some new features.
  2. Each object has its own set of methods that waste resources console.log(p1.showname == p2.showname); If function() is created using new function(), a new function object will be created, resulting in a waste of resources.

The constructor

  • Array, Object, Function, etc. are all built-in classes. All arrays are instances of Array. All objects are instances of Object, so functions are instances of Function, and constructors are custom classes.
function CreatePerson (name,age){  // The constructor begins with a capital letter
  this.name =name;
  this.age = age;
  this.showName = function (){
    console.log("Name:"+ this.name); };this.showAge = function (){
    console.log("Name:"+this.age);
  }
  // Do not return the object!!
}

var p1 = new CreatePerson("Zhang".45);
var p2 = new CreatePerson("Bill".20);
p1.showName();
p2.showName();
console.log(p1.showName==p2.showName); //false

//1. We see that the new method is used to create the object.
/ / 2. But the console. The log (p1) showName = = p2) showName); // If false is still false, there is still a waste of resources.

Copy the code

The prototype of the constructor

  • JavaScript states that each function has a Prototype property that points to another object. All properties and methods of this object are inherited by the new instance of the function. A reference to Prototype is definitely a function. Prototype is a property of a function. It is the prototype object of a function
function CreatePerson (name,age){  // The constructor begins with a capital letter
  this.name =name;
  this.age = age;
}
CreatePerson.prototype.showName = function () {
  console.log("Name:"+this.name );
}
CreatePerson.prototype.showName = function () {
  console.log("Age:"+this.age );
}
var p1 = new CreatePerson("Zhang".45);
var p2 = new CreatePerson("Bill".20);
p1.showName();
p2.showName();

console.log(p1.showName == p2.showName);  //true
console.log(p1.showName == Person.prototype.showName);  //true
/ / when the console. The log (p1) showName = = p2) showName); The result is true
// All instance methods refer to the same memory address as the Prototype object, thus improving the runtime efficiency.
//console.log(p1.showName == Person.prototype.showName); Proofs for true refer to the Prototype object

Copy the code