javascript 構(gòu)造函數(shù)方式定義對象

更新時間：2015年01月02日 10:18:28 投稿：hebedich

這篇文章主要介紹了javascript 構(gòu)造函數(shù)方式定義對象的方法及示例,需要的朋友可以參考下

javascript是動態(tài)語言，可以在運行時給對象添加屬性，也可以給對象刪除(delete)屬性

<html> 

<head>

<script type="text/javascript">

/*

//01.定義對象第一種方式

var object =new Object();

alert(object.username);

//01.1增加屬性username

object["username"]="liujianglong";

//object.username="liujl";

alert(object.username);

//01.2刪除屬性username

delete object.username;//username屬性已經(jīng)從object對象中刪除

alert(object.username);

*/

//02.定義對象第二種方式--在javascript中定義對象的一種最常見的方式

var object={name:"zhangsan",age:10,sex:"fale"};

alert(object.name);

alert(object.age);

alert(object.sex);

</script>

</head>         

<body>

</body>

</html>

屬性名:方法名也是可以的.因為函數(shù)本身就是個對象

javascript 數(shù)組排序

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

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var array=[1,3,25];
/////////////////////////////////
var compare=function(num1,num2){
    var temp1=parseInt(num1);
    var temp2=parseInt(num2);
    if(temp1<temp2){
        return -1;
    }else if(temp1==temp2){
        return 0;
    }else{
        return 1;
    }
}
//array.sort(compare);//01.函數(shù)名是對象引用
////////////////////////////////

//02.匿名函數(shù)方式//////////////////
array.sort(function c(num1,num2){
var temp1=parseInt(num1);
    var temp2=parseInt(num2);
    if(temp1<temp2){
        return -1;
    }else if(temp1==temp2){
        return 0;
    }else{
        return 1;
    }
});
/////////////////////////////////
alert(array);
</script>
</head>
<body>
</body>
</html>

javascript中定義對象的幾種方式(javascript中沒有類的概念，只有對象 )

第一種方式: 基于已有對象擴充其屬性和方法

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

<script type="text/javascript">

//01.基于已有對象擴充其屬性和方法

var object=new Object();

object.username="zhangsan";

object.sayName=function (name){

    this.username=name;

    alert(this.username);

}

alert(object.username);

object.sayName("lisi");

alert(object.username);

</script>

這種方法具有局限性，因為javascript不像java那樣具有類的概念，寫一個類，之后new就可以得到一個具有了這些屬性、方法的對象了。

這時如果要擁有object2就只能把上面來的代碼再寫一份，這是不太好的。

第二種方式: 工廠方式

類似于java中靜態(tài)的工廠方法。

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

<!DOCTYPE html>

<html> 

<head>

<script type="text/javascript">

//對象工廠方法

var  createObject=function(){

    var object=new Object();

    object.username="zhangsan";

    object.password="123";

    object.get=function(){

        alert(this.username+" , "+object.password); 

    }

    return object;

}

var obj1=createObject();

var obj2=createObject();

obj1.get();

//修改對象2的密碼

obj2["password"]="123456";

obj2.get();

</script>

</head>         

<body>

</body>

</html>

上面這種方式創(chuàng)建對象有弊端(每個對象都有一個get方法，從而浪費了內(nèi)存),改進后的工廠方式( 所有對象共享一個get方法):

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

<!DOCTYPE html>

<html> 

<head>

<script type="text/javascript">

//所有對象共享的get方法

var get=function(){

    alert(this.username+" , "+this.password);

}

//對象工廠方法

var createObject=function(username,password){

    var object=new Object();

    object.username=username;

    object.password=password;

    object.get=get;//注意：這里不寫方法的括號

    return object;

}

//通過工廠方法創(chuàng)建對象

var object1=createObject("zhangsan","123");

var object2=createObject("lisi","345");

//調(diào)用get方法

object1.get();

object2.get();

</script>

</head>         

<body>

</body>

</html>

第三種方式: 構(gòu)造函數(shù)方式定義對象

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

<!DOCTYPE html>

<html> 

<head>

<script type="text/javascript">

var get=function(){

    alert(this.username+" , "+this.password);

}

function Person(username,password){

    //在執(zhí)行第一行代碼前，js引擎會為我們生成一個對象

    this.username=username;

    this.password=password;

    this.get=get;

    //在此處，有一個隱藏的return語句，用于返回之前生成的對象[這點是和工廠模式不一樣的地方]

}

var person=new Person("zhangsan","123");

person.get();

</script>

</head>         

<body>

</body>

</html>

第四種方式: 原型(Prototype)方式創(chuàng)建對象

prototype是object對象中的屬性，所有person對象也可以擁有prototype這個屬性。

可以給對象的原型增加一些屬性，方法。

單純的使用原型方式創(chuàng)建對象的缺點：①無法傳參數(shù),只能在對象創(chuàng)建后再改變它的值

②可能會導(dǎo)致程序錯誤

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

<!DOCTYPE html>

<html> 

<head>

<script type="text/javascript">

function Person(){

}

Person.prototype.username="zhangsan";

Person.prototype.password="123";

Person.prototype.getInfo=function(){

    alert(this.username+" , "+this.password);

}

var person1=new Person();

var person2=new Person();

person1.username="lisi";

person1.getInfo();

person2.getInfo();

</script>

</head>         

<body>

</body>

</html>

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

<!DOCTYPE html>

<html> 

<head>

<script type="text/javascript">

function Person(){

}

Person.prototype.username=new Array();

Person.prototype.password="123";

Person.prototype.getInfo=function(){

    alert(this.username+" , "+this.password);

}

var person1=new Person();

var person2=new Person();

person1.username.push("wanglaowu");

person1.username.push("wanglaowu2");

person2.password="456";

person1.getInfo    ();

person2.getInfo();

</script>

</head>         

<body>

</body>

</html>

單純使用原型方式定義對象無法再構(gòu)造函數(shù)中為屬性賦初值，只能在對象生成后再去改變屬性值。

第五種方式: 使用原型+構(gòu)造函數(shù)方式來定義對象----推薦使用

對象之間的屬性互不干擾
各個對象之間共享同一個方法

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

<!DOCTYPE html>

<html> 

<head>

<script type="text/javascript">

//使用原型+構(gòu)造函數(shù)方式來定義對象

function Person(){

    //屬性 定義在構(gòu)造函數(shù)中

    this.username=new Array();

    this.password="123";

}

    //方法 定義在原型中

Person.prototype.getInfo=function(){

    alert(this.username+" , "+this.password);

}

var p1=new Person();

var p2=new Person();

p1.username.push("zhangsan");

p2.username.push("lisi");

p1.getInfo();

p2.getInfo();

</script>

</head>         

<body>

</body>

</html>

第六種方式: 動態(tài)原型方式----推薦使用

在構(gòu)造函數(shù)中通過標(biāo)志量讓所有對象共享一個方法，而每個對象擁有自己的屬性。

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

<!DOCTYPE html>

<html> 

<head>

<script type="text/javascript">

var Person=function (username,password){

    this.username=username;

    this.password=password;

    if(typeof Person.flag=="undefined"){

        alert("invoked");

        Person.prototype.getInfo=function(){

            alert(this.username+" , "+this.password);

        }

        Person.flag=true;    

    }

}

var p1=new Person("zhangsan","123");

var p2=new Person("lisi","456");

p1.getInfo();

p2.getInfo();

</script>

</head>         

<body>

</body>

</html>