本文實例分析了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);//共性是函數,打印trueconsole.log(person1.friends===person2.friends);//friends是個性,打印false            
新聞熱點
疑難解答
圖片精選