javascript工廠方式定義對象

更新時間：2014年12月26日 09:29:44 投稿：hebedich

這篇文章主要介紹了javascript工廠方式定義對象,以及另外3中創(chuàng)建對象的方式，需要的朋友可以參考下

每一個函數對象都有一個length屬性，表示該函數期望接收的參數個數。

<html> 

<head> 

<script type="text/javascript"> 

var add =function(num1,num2,num3){ 

    alert(num1+num2+num3); 

} 

alert(add.length); 

</script> 

</head> 

<body> 

</body> 

</html>

關于js面向對象的創(chuàng)建方式,

目標:

構建一個order對象.
包含三個屬性:日期,金額,提交人
包含一個方法:顯示字符串:”XX在XXXX-XX-XX 提交了額度為:XXXX元的訂單"

一工廠方式

復制代碼代碼如下:

         <script type=text/javascript>

              /*

                   工廠方式:通過使用方法返回對象,使用時不需要通過new生成新對象.

              */

              function createOrder()//也可以構建帶參數的工廠方法,根據傳入的參數初始化對象數據.

              {

                   var order = new Object();

                   order.Date = "1990-1-1";

                   order.Price = "3200";

                   order.Name = "Vince Keny";

                   order.Show = function()//將show方法放在工廠中,則分別為每個實例創(chuàng)造一個Show方法.浪費資源是此模式的弊端.

                       {

                            alert(this.Name + " 在 " + this.Date + " 提交了額度為 " + this.Price + " 元的訂單.")

                       }

                   return order;

              }

              //使用工廠模式返回對象:

              var order =  createOrder();

              //也可以這樣使用,把工廠模式改造成"偽構造函數",因為在工廠中使用了new,所以創(chuàng)建對象時的new運算符將被忽律.

              var order2 = new createOrder();

              order.Show();

              order2.Show();

         </script>

二構造函數方式

復制代碼代碼如下:

/*

     構造函數方式,方法的聲明與工廠方式一樣,也存在同同樣的問題,同樣可以提取出來.不同點是聲明屬性用this

    并且需要使用new運算符生成實例.

*/

function Order()

{

     this.Date = "1990-1-1";

     this.Price = "3200";

     this.Name = "Vince Keny";

     this.Show = function()

         {

              alert(this.Name + " 在 " + this.Date + " 提交了額度為 " + this.Price + " 元的訂單.")

         }

}

var order = new Order();

order.Show();

三原型方式

復制代碼代碼如下:

/*

     原型方式:使用prototype

*/

function Order()

{}

Order.prototype.Date = "1990-1-1";

Order.prototype.Price = "3200";

Order.prototype.Name = "Vince Keny";

Order.prototype.Show = function()

     {

         alert(this.Name + " 在 " + this.Date + " 提交了額度為 " + this.Price + " 元的訂單.")

     }

var order = new Order();

order.Show();

四混合構造函數/原型方式

復制代碼代碼如下:

/*

     混合構造函數/原型 方式 : 使用構造函數方式初始化屬性字段,使用原型方式構造方法.

*/

function Order()

{

     this.Date = "1990-1-1";

     this.Price = "3200";

     this.Name = "Vince Keny";

}

Order.prototype.Show = function().

{

         alert(this.Name + " 在 " + this.Date + " 提交了額度為 " + this.Price + " 元的訂單.")

}

var order = new Order();

order.Show();

五動態(tài)混合方式

復制代碼代碼如下:

/*
     動態(tài)混合方式 : 和混合方式不同點在于聲明方法的位置.將方法生命放到了構造函數內部,更符合面向對象.
*/
function Order()
{
     this.Date = "1990-1-1";
     this.Price = "3200";
     this.Name = "Vince Keny";

     if(typeof Order._initialized == "undefined")
     {
         Order.prototype.Show = function().
                       {
                            alert(this.Name + " 在 " + this.Date + " 提交了額度為 " + this.Price + " 元的訂單.")
                       };
         Order._initialized = true;
     }
}

    function Car(sColor,iDoors){
        var oTempCar = new Object;
        oTempCar.color = sColor;
        oTempCar.doors = iDooes;
        oTempCar.showColor = function (){
            alert(this.color)
        };
        return oTempCar;
    }
    var oCar1 = new Car("red",4);
    var oCar2 = new Car("blue",3);
    oCar1.showColor();        //outputs "red"
    oCar2.showColor();        //outputs "blue"

您可能感興趣的文章: