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

188 阅读3分钟

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

单例模式

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

  1. 一般我们创建对象是通过new来创建,比如new Date(),这里使用的是方法创建。(var p1=createPerson("张三",45))使用new来创建可以简化一些代码,也带来一些新的特性。
  2. 每个对象都有一套自己的方法,浪费资源 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对象