工厂模式、构造函数、原型的理解-一一网

越来越感觉到站在巨人的肩膀上学习是多么方便，并且越来越感觉到前端内容广阔，需要学习的东西还很多，努力吧！去争取自己想要的生活，做一个合格的码农。

单例模式

单例模式就是起到分组的作用，比如大型项目中，好多前端人员进行开发，这个时候可以把项目分成几个功能模块，不同的人编写不同的模块，最后合起来就是模块化开发.

//单例模式
var person1 ={
  name:'张三',
  age:54,
  showName:function () {
    console.log("姓名："+this.name);
  },
  showAge:function () {
    console.log("年纪："+this.age);
  }
}
var person2 ={
  name:'李四',
  age:20,
  showName:function () {
    console.log("姓名："+this.name);
  },
  showAge:function () {
    console.log("年纪："+this.age);
  }
}

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

复制代码

缺点也是显而易见的能解决分组作用，但是不能解决批量生成的问题，代码可重复性低，而且多个对象之后代码冗余程度高.

工厂模式 (顾名思义就是批量生产东西嘛)

把实现同一件事情的相同代码放到同一个函数中，想实现这个功能只要执行这个函数即可，这就是工厂模式，也叫做“函数的封装”，这也是”低耦合，高内聚“，从而达到减少页面冗余码，提高代码重复利用率的作用.

function createPerson(name,age){
  var person =new Object(); //创建一个新对象
   //原料
  person.name = name;
  person.age = age;
   //加工
  person.showName = function(){
    console.log("姓名："+this.name);
  }
  person.showAge = function(){
    console.log("年龄："+this.age);
  }
  //出厂
  return person;
}

var p1 = createPerson("张三",45);
var p2 = createPerson("李四",20);

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

复制代码

一般我们创建对象是通过new来创建，比如new Date()，这里使用的是方法创建。（var p1=createPerson(“张三”,45)）使用new来创建可以简化一些代码，也带来一些新的特性。
每个对象都有一套自己的方法，浪费资源 console.log(p1.showName==p2.showName); false 说明两个方法不一样，因为创建function()的时候其本质是通过new Function()来创建的，会诞生一个新的函数对象，造成资源浪费。

构造函数

Array、Object、Function等这些都是内置类，所有的数组都是内置类Array的实例，所以的对象都是内置类Object的实例，所以函数都是Function的实例，而构造函数就是自定义一个类。

function CreatePerson (name,age){  //首先构造函数 开头首字母大写
  this.name =name;
  this.age = age;
  this.showName = function (){
    console.log("姓名："+ this.name);
  } ;
  this.showAge = function (){
    console.log("姓名："+this.age);
  }
  //不用返回对象啦！！！
}

var p1 = new CreatePerson("张三",45);
var p2 = new CreatePerson("李四",20);
p1.showName();
p2.showName();
console.log(p1.showName==p2.showName); //false

//1.我们看到这里使用了new方法来创建对象.
//2.但是console.log(p1.showName==p2.showName); //false 依旧是false  说明还是存在浪费资源的问题.

复制代码

构造函数之原型

JavaScript规定，每一个函数都有一个prototype属性，它指向另一个对象。这个对象的所有属性和方法，都会被函数的new出来的实例继承。能够引用prototype的东西绝对是函数,prototype是函数的一个属性，是函数的原型对象

function CreatePerson (name,age){  //首先构造函数 开头首字母大写
  this.name =name;
  this.age = age;
}
CreatePerson.prototype.showName = function () {
  console.log("姓名："+this.name );
}
CreatePerson.prototype.showName = function () {
  console.log("年龄："+this.age );
}
var p1 = new CreatePerson("张三",45);
var p2 = new CreatePerson("李四",20);
p1.showName();
p2.showName();

console.log(p1.showName == p2.showName);  //true
console.log(p1.showName == Person.prototype.showName);  //true
//这时console.log(p1.showName==p2.showName); 结果为 true
//这时所有实例的方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。
//console.log(p1.showName == Person.prototype.showName); 为true 证明都指向prototype对象

复制代码