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

没有解决对象识别的问题。因为函数内部使用了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. 稳妥构造函数模式

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/9a86008dace47134380c4234b1505131.html