JS常见构造模式实例对比分析

时间：2022-06-25 15:42:52 编辑：袖梨来源：一聚教程网

本文实例分析了JS常见构造模式。分享给大家供大家参考，具体如下：

1.工厂模式

没有解决对象识别的问题。因为函数内部使用了new Object来创建对象

function Factory(name,age)
{
  var o=new Object();
  o.name=name;
  o.age=age;
  o.what=what;//用函数引用的方式消除重复创建相同函数的弊端，节省资源.函数引用可以修改this的指向，函数调用不可以！
  return o;
}
what=funciton()
{
  alert(this.name+this.age);
}
var o=Factory("12",12);
o.what();//what中的this指向o对象

这时候的constructor是Object，同时所有通过工厂模式返回的对象都是Object类型，所以instanceof操作符没有意义

console.log(o.constructor);
//打印function Object() { [native code] }
console.log(o instanceof Object);
//而且这时候所有的对象都是Object类型的

2.构造函数模式

function Person(name,age)
{
this.name=name;
this.age=age;
this.sayName=function(){ alert(this.name);}//相当于this.sayName=new Function("alert(this.name)")
}
var p1=new Person("xx",12);
var p2=new Person("yy",13);
alert(p1.sayName==p2.sayName)//内存地址不一样!返回false

构造函数相比工厂模式的优点在于能够正确的返回对象的类型，instanceof返回正确的结果。缺点在于如果向上面那样，那么在每一个对象上面都要有一个sayName方法，而且这些sayName方法不是同一个Function实例，因为ECMAScript中函数是对象，因此每定义一个函数，也就是实例化了一个对象！

对上面的方法进行优化：

function Person(name,age)
{
this.name=name;
this.age=age;
this.sayName=sayName;//函数引用的方法，共享了同一个sayName,p1,p2的内存地址一样，p1.sayName==p2.sayName返回true
}
function sayName()
{
alert(this.name);
}

缺点：全局函数sayName只能被某个对象调用p1.sayName，让全局函数名不副实；如果对象要定义很多方法，那么就要定义很多的全局函数，所以自定义的引用类型没有封装性可言

3.原型模式

（1）无法通过构造函数参数向原型属性动态传值，后果就是：没有个性，改变原型属性的值，所有的实例都会受到干扰！

（2）当原型属性的是引用类型的时候，如果在一个对象实例上修改属性，将会影响所有实例！

总之一句话：牵一发而动全身（包括属性和引用类型的值）是原型模式的特点。但是相比于构造函数类型，原型类型满足

person1.sayName===person2.sayName//两者的引用是一样的

4.构造函数原型模式

用构造函数定义个性，用原型模式定义共性

function Person(name,age)
{
 this.name=name;
 this.age=age;
 this.friends=['liangklfang','qinliang'];
}
//用原型定义共性
Person.prototype={
 constructor:Person,
 sayName:function()
 {
  console.log(this.name);
 }
}
var person1=new Person('liangklfang',"12");
var person2=new Person('liangklf',"14");
console.log(person1.sayName===person2.sayName);
//共性是函数，打印true
console.log(person1.friends===person2.friends);
//friends是个性，打印false

也可以对构造函数原型模式进行优化，就是常说的动态原型模式

function Book(title,page)
{
 this.title=title;
 this.page=page;
 if(typeof Book.isLock=="undefined")
//第一次的时候，Book.isLock是undefined，给原型绑定函数，以后就不需要了，他相比于构造函数原型模式的优点在于把所有的逻辑全部封装到构造函数里面！
  {
   alert("Enter!");
Book.prototype.what=function() 
     {
   alert(this.title+this.pages);
     }
   Book.isLock=true;
 }
}
//下面的两次调用alert("Enter!")只会调用因此i，因为第一次已经通过Book.isLock设置为true了！相当于静态方法！;
var b1=new Book("me",12);
b1.what();
var b2=new Book("he",13);
b2.what();

也可以在this中直接检测，而不用给函数对象一个属性

function Book(title,page)
{
 this.title=title;
 this.page=page;
  if(typeof this.sayName!='function')
  //第二次构造对象的时候会在原型中查找到sayName!
  {
   Book.prototype.sayName=function()
 {
  console.log(this.title);
 }
  }
}

5.寄生构造函数模式

除了使用new操作符以外，和工厂设计模式是一模一样的！可以在特殊的情况下为对象创建构造函数，例如想用构造函数方式创建一个具有额外方法的特殊数组，因为不能直接修改Array的构造函数，因此可以用这个模式！

function SpecialArray()
{
  var value=new Array();
  value.push.apply(value,arguments);
  value.toPipedString=function()
  {
    return this.join("|");
}
 return value;
}

总之，寄生构造函数的特点就是：有点像java中的装饰模式！把原来的对象进行装饰，同时返回装饰后的对象！这里就是把Array对象进行了装饰！添加了toPipe的String方法。缺点就是不能依赖instanceof操作符确定对象类型了，因为和不再包装类里面创建的对象是一模一样的！

6. 稳妥构造函数模式

特点：没有公共属性，而且其方法也不引用this的对象，instanceof失效。和寄生构造函数的不同在于不使用new来构造函数，同时实例方法不引用this。实际是闭包

function Person(name,age,job)
{
   var o=new Object();
    o.sayName=funciton(){alert(name)}//这里实例方法没有引用this，除了sayName不会有方法访问传入到构造函数中的原始数据！
   return o;
}
var friend=Person("xx",12,"teacher");
friend.name="female";//即使可以为这个对象修改了属性name
friend.sayName();//不会被修改，依然弹出xx。不是female。但是，如果把上面的修改成：o.sayName=function(){alert(this.name)}//那么就会弹出female，也就是friend.name被修改成功了,如果没有this，那么name的值一直引用的是原来的参数值！

推荐专题

最新下载

热门教程

JS常见构造模式实例对比分析

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程