JavaScript高階程式設計之設計模式
阿新 • • 發佈:2019-02-16
工廠模式:
此種模式是軟體工程領域中的一個廣為認知的設計模式,抽象了建立具體物件的過程,利用函式來封裝以特定介面建立物件的細節。通過多次傳參呼叫函式來建立具有多個屬性和方法的物件。
1.優點:解決了建立多個相似物件的問題,操作簡單
2.缺點:沒有解決物件具體識別的問題,這是簡單地識別為object型別,並沒有具體化
例程式碼如下:
function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var person1=createPerson("mimi",18,"Software Engineer"); var person2=createPerson("nene",28,"Doctor");
建構函式:
1.優點:可以建立特定型別的物件,沒有顯示建立物件,不用return返回值,操作簡單方便,只要利用new操作符即可
2.缺點:每個方法都要在每一個例項上建立一遍,這樣會導致當物件之間存在過多相同屬性和方法時,存在大量的程式碼冗餘。
例程式碼如下:
function createPerson(name,age,job){ this.name=name; this.age=age; this.job=job; this.sayName=function(){ alert(this.name); }; } var person1=new Person("mimi",18,"Software Engineer"); var person2=new Person("nene",28,"Doctor");
原型模式:
1.優點:此模式最大的優點就是完美解決了第二種模式中的缺點:可以讓所有物件例項共享它包含的屬性和方法,不必在建構函式中定義物件市裡的資訊,而是將這些資訊直接新增到原型物件中
2.缺點:它的缺點正好也是由於它的優點導致的,它將所有資訊都進行了共享,但實際上我們在開發過程,並不是希望所有資訊都是共享的,有一部分共享,有一部分屬於自己的獨特的屬性。
所以我們可以將第二種和第三種模式結合起來,解決此種問題,得到第四種設計模式。
function Person(){ } Person.prototype.name="mimi"; Person.prototype.age="15"; Person.prototype.job="Doctor"; Person.prototype.sayName=function(){ alert(this.name); }; var person1=new Person(); person1.sayName();//mimi var person2=new Person(); person2.sayName();//mimi
組合使用建構函式模式和原型模式:
每一個例項都會有自己的一份例項屬性的副本,但同時又共享著對方法的引用,最大限度的節省了記憶體,此種模式還支援傳遞引數。所以此種模式也是ECMAScript使用最廣泛、認同度最高的一種建立自定義型別的方法。
例如下程式碼:
//利用建構函式新增各自的屬性,保持自己的獨立性
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.friends=["Shelby","Court"];
}
//利用原型共享彼此資訊,保證資訊共享
Person.prototype={
constructor:Person,
sayName:function(){
alert(this.name);
}
}
var person1=new Person("Nicholas","29","Software Engineer");
var person2=new Person("Greg","27","Doctor");
person1.friends.push("Van");
console.log(person1.friends);
console.log(person2.friends);
console.log(person1.sayName);
console.log(person2.sayName);
console.log(person1.friends === person2.friends);
console.log(person1.sayName === person2.sayName);