javascript 構造函數方式定義對象 (轉載）

時間 2019-11-12

標籤 javascript 構造函數方式定義對象轉載欄目 JavaScript 简体版

原文原文鏈接

javascript 構造函數方式定義對象

javascript是動態語言，能夠在運行時給對象添加屬性，也能夠給對象刪除(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屬性已經從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>

屬性名:方法名也是能夠的.由於函數自己就是個對象javascript

javascript 數組排序

<!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.函數名是對象引用
////////////////////////////////


//02.匿名函數方式//////////////////
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中沒有類的概念，只有對象 )

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

<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就能夠獲得一個具備了這些屬性、方法的對象了。html

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

第二種方式: 工廠方式

相似於java中靜態的工廠方法。數組

按 Ctrl+C 複製代碼

上面這種方式建立對象有弊端(每一個對象都有一個get方法，從而浪費了內存),改進後的工廠方式( 全部對象共享一個get方法):函數

<!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;
}

//經過工廠方法建立對象
var object1=createObject("zhangsan","123");
var object2=createObject("lisi","345");

//調用get方法
object1.get();
object2.get();
</script>
</head>         
<body>
</body>
</html>

第三種方式: 構造函數方式定義對象

<!DOCTYPE html>
<html> 
<head>
<script type="text/javascript">

var get=function(){
    alert(this.username+" , "+this.password);
}

function Person(username,password){
    //在執行第一行代碼前，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)方式建立對象

prototype是object對象中的屬性，全部person對象也能夠擁有prototype這個屬性。post

能夠給對象的原型增長一些屬性，方法。this

單純的使用原型方式建立對象的缺點：①沒法傳參數,只能在對象建立後再改變它的值url

②可能會致使程序錯誤spa

<!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>

<!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>

單純使用原型方式定義對象沒法再構造函數中爲屬性賦初值，只能在對象生成後再去改變屬性值。prototype

第五種方式: 使用原型+構造函數方式來定義對象----推薦使用

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

<!DOCTYPE html>
<html> 
<head>
<script type="text/javascript">
//使用原型+構造函數方式來定義對象

function Person(){
    //屬性 定義在構造函數中
    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>

第六種方式: 動態原型方式----推薦使用

在構造函數中經過標誌量讓全部對象共享一個方法，而每一個對象擁有本身的屬性。

<!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>