快捷導(dǎo)航

javascript工廠方式定義對(duì)象

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

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

每一個(gè)函數(shù)對(duì)象都有一個(gè)length屬性，表示該函數(shù)期望接收的參數(shù)個(gè)數(shù)。

<html> 

<head> 

<script type="text/javascript"> 

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

    alert(num1+num2+num3); 

} 

alert(add.length); 

</script> 

</head> 

<body> 

</body> 

</html>

關(guān)于js面向?qū)ο蟮膭?chuàng)建方式,

目標(biāo):

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

一工廠方式

復(fù)制代碼代碼如下:

         <script type=text/javascript>

              /*

                   工廠方式:通過(guò)使用方法返回對(duì)象,使用時(shí)不需要通過(guò)new生成新對(duì)象.

              */

              function createOrder()//也可以構(gòu)建帶參數(shù)的工廠方法,根據(jù)傳入的參數(shù)初始化對(duì)象數(shù)據(jù).

              {

                   var order = new Object();

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

                   order.Price = "3200";

                   order.Name = "Vince Keny";

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

                       {

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

                       }

                   return order;

              }

              //使用工廠模式返回對(duì)象:

              var order =  createOrder();

              //也可以這樣使用,把工廠模式改造成"偽構(gòu)造函數(shù)",因?yàn)樵诠S中使用了new,所以創(chuàng)建對(duì)象時(shí)的new運(yùn)算符將被忽律.

              var order2 = new createOrder();

              order.Show();

              order2.Show();

         </script>

二構(gòu)造函數(shù)方式

復(fù)制代碼代碼如下:

/*

     構(gòu)造函數(shù)方式,方法的聲明與工廠方式一樣,也存在同同樣的問題,同樣可以提取出來(lái).不同點(diǎn)是聲明屬性用this

    并且需要使用new運(yùn)算符生成實(shí)例.

*/

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();

三原型方式

復(fù)制代碼代碼如下:

/*

     原型方式:使用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();

四混合構(gòu)造函數(shù)/原型方式

復(fù)制代碼代碼如下:

/*

     混合構(gòu)造函數(shù)/原型 方式 : 使用構(gòu)造函數(shù)方式初始化屬性字段,使用原型方式構(gòu)造方法.

*/

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();

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

復(fù)制代碼代碼如下:

/*
     動(dòng)態(tài)混合方式 : 和混合方式不同點(diǎn)在于聲明方法的位置.將方法生命放到了構(gòu)造函數(shù)內(nèi)部,更符合面向?qū)ο?
*/
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"

您可能感興趣的文章: