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

原始模式：

    var Car = new Object;

    Car.color = "blue";
    Car.door = 4;
    Car.showColor = function() {
        alert(this.color);
    }

    Car.showColor(); //"blue";

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

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

缺點：如果有多個類型，需要創建多個實例;

 

工廠模式：

    function createCar() {
        var Car = new Object;

        Car.color = "blue";
        Car.door = 4;
        Car.showColor = function() {
            alert(this.color);
        }

        return Car;

    }

    var car1 = createCar();
    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"

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

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

結語：此篇只是作為理解設計模式所寫，如有錯誤，請各位同仁指出，共同學習

參照鏈接 http://www.w3school.com.cn/js/pro_js_object_defining.asp