前端设计模式:从js原始模式开始,去理解Js工厂模式和构造函数模式
原始模式:
在js中我们需要创建一个对象,比如创建一个“人”,它拥有自己的名称属性,和可以说话的功能,我们可以这样实现:
var person = new Object;
person.name = "Tony";
person.sayName = function(){
console.log(this.name);
};
//或者字面量形式
var person={
name:"tony",
sayName:function(){
console.log(this.name);
}
}这种设计被称为:原始模式。我们可以看出它具如下优缺点:
优点:可以直观的看出对象拥有的属性和方法
缺点:如果有多个类型,需要创建多个实例
工厂模式
如果需要批量创建多个人,如person1、person2……的时候,使用原始模式的话每次都要重复类似的代码,如果要是可以批量生产就好了,这个时候使用工厂模式就能很好解决。如下:
var person=function(name){
var obj=new Object;
obj.name=name;
obj.sayName=function(){
console.log(this.name);
}
return obj
}
var p1=person('tony');
var p2=person('aimi');
console.log(typeof p1); // object
console.log(typeof p2); // object
console.log(p1 instanceof Object); // true这样简单的调用就可进入造人模式了(啪啪啪……),只需要指定姓名就可以了。所以工厂模式可以理解像生活中工厂一样,可以批量的生产具有相同属性和功能的商品。开发场景:当我们需要解决很多相似问题,这时候就需要采用工厂模式来实现。
但是工厂模式下的对象我们不能识别它的类型,由于typeof返回的都是object类型,不知道它是那个对象的实例。另外每次造人时都要创建一个独立的person的对象,会造成代码臃肿的情况。所以工厂模式的优缺点总结如下:
优点:同一类型同一属性可以重复调用;能解决多个相似的问题。
缺点:不能知道对象识别的问题(对象的类型不知道)。
构造函数模式
除了上面讲的工厂模式外,我们还可以使用构造函数模式来解决重复造轮子,产生大量的重复性代码的问题。例如:
var Person=function(name){
this.name=name;
this.sayName=function(){
console.log(this.name);
}
}
var p1=new Person('tony');
var p2=new Person('aimi');
我们可以看出要使用Person的新实例,就必须使用new。新实例的constructor(构造函数)属性指向的就是Person。
console.log(p1.constructor == Person);//true同时使用instanceof检测对象的类型就更为可靠了,因为instanceof是用来专门比较一个对象是否为某个构造函数的实例:
console.log(p1 instanceof Object); // true
console.log(p1 instanceof Person); // true这就是构造函数比工厂模式强的地方,因为它只道自己从哪里来,通过谁产生的。
利用工厂方法对构造函数模式代码的改进:
当创建对象的流程赋值的时候,比如依赖于很多设置文件等。并且,你会经常在程序里看到工厂方法,用于让子类类定义需要创建的对象类型。
var Person = (function () {
var Person = function (name) {
this.name = name;
this.sayName=function(){
console.log(this.name);
}
};
return function (name) {
return new Person(name);
};
})();
var p1 = new Person("tony");
本文内容仅供个人学习/研究/参考使用,不构成任何决策建议或专业指导。分享/转载时请标明原文来源,同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦~感谢您的理解与支持!