您的位置：首页 > Web前端 > JavaScript

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

2018-08-27 08:40 906 查看

本文实例分析了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的值一直引用的是原来的参数值！

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试运行上述js代码。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  JS 构造模式
相关文章推荐
新的分享
章节导航