js 的四種設計模式的優缺點

標籤：obj   html   strong   關鍵字   運算   四種   imp   獨立   john   

轉自：http://www.cnblogs.com/WebYan/p/6066191.html#commentform

原始模式：

1     var Car = new Object;2 3     Car.color = "blue";4     Car.door = 4;5     Car.showColor = function() {6         alert(this.color);7     }8 9     Car.showColor(); //"blue";

原理：聲明對象，後續給對象加屬性和方法

優點：可以直觀的看出對象Car有屬性 color,door,方法showcolor；

缺點：如果有多個類型，需要建立多個執行個體；

原廠模式：

 1     function createCar() { 2         var Car = new Object; 3  4         Car.color = "blue"; 5         Car.door = 4; 6         Car.showColor = function() { 7             alert(this.color); 8         } 9 10         return Car;11 12     }13 14     var car1 = createCar();15     var car2 = createCar();       car1.showColor() //blue;       car2.showColor() //blue;

原理：將原始方式封裝到函數中，並返回這個對象

優點：同一類型同一屬性可以重複調用；

缺點：同一類型不同屬性值的不能調用；

原廠模式為函數傳參：

    function showColor() {        alert(this.color);    }    function createCar(sColor, sDoor) {        var Car = new Object;        Car.color = sColor;        Car.door = sDoor;        Car.showColor = showColor;        return Car;    }    var car1 = createCar("red","4");    var car2 = createCar("blue","6");    car1.showColor();    car2.showColor();

原理：原廠模式的升級版，為函數添加參數，方法調取外部的函數的指標

優點：解決了重複建立函數的問題；

缺點：不符合語義，看起來不像是對象的方法；

建構函式方式：

function Car(sColor,iDoors,iMpg) {  this.color = sColor;  this.doors = iDoors;  this.mpg = iMpg;  this.showColor = function() {    alert(this.color);  };}var oCar1 = new Car("red",4,23);var oCar2 = new Car("blue",3,25);

原理：在建構函式內使用 this 關鍵字,建立屬性和方法。再使用 new 運算子建立執行個體，通過傳參產生不同的執行個體

優點：該方式解決了以上模式所遇到的問題；

缺點：建構函式會重複產生函數，為每個對象都建立獨立的函數版本；

原型方式：

function Car() {}Car.prototype.color = "blue";Car.prototype.doors = 4;Car.prototype.mpg = 25;Car.prototype.showColor = function() {  alert(this.color);};var oCar1 = new Car();var oCar2 = new Car();

原理：建立一個建構函式，再函數外為通過prototype方式添加屬性和方法，最後通過new 運算子產生執行個體

優點：語義上,看起來所有屬性都是同一個對象，解決了上兩種方式所遇到的問題；

缺點：不能通過給建構函式傳遞參數來初始化屬性的值，而且如果其中某個執行個體屬性重新賦值,會導致其他的執行個體同一屬性也會發生變化；

function Car() {}Car.prototype.color = "blue";Car.prototype.doors = 4;Car.prototype.mpg = 25;//指向一個對象Car.prototype.drivers = new Array("Mike","John");Car.prototype.showColor = function() {  alert(this.color);};var oCar1 = new Car();var oCar2 = new Car();//為oCar1新加入oCar1.drivers.push("Bill");alert(oCar1.drivers);    //輸出 "Mike,John,Bill"alert(oCar2.drivers);    //輸出 "Mike,John,Bill"

上面的代碼中，屬性 drivers 是指向 Array 對象的指標，該數組中包含兩個名字 "Mike" 和 "John"。由於 drivers 是引用值，Car 的兩個執行個體都指向同一個數組。這意味著給 oCar1.drivers 添加值 "Bill"，在 oCar2.drivers 中也能看到。輸出這兩個指標中的任何一個，結果都是顯示字串 "Mike,John,Bill"。

混合的建構函式/原型方式：

function Car(sColor,iDoors,iMpg) {  this.color = sColor;  this.doors = iDoors;  this.mpg = iMpg;  this.drivers = new Array("Mike","John");}Car.prototype.showColor = function() {  alert(this.color);};var oCar1 = new Car("red",4,23);var oCar2 = new Car("blue",3,25);oCar1.drivers.push("Bill");alert(oCar1.drivers);    //輸出 "Mike,John,Bill"alert(oCar2.drivers);    //輸出 "Mike,John"

原理：利用建構函式方式建立函數的不同的部分，利用原型方式來定義相同的方法和屬性

優點：此種 方式即符合語義又可以擴充新的屬性和方法

js 的四種設計模式的優缺點