首頁 > 開發者 > 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 數組排序
複製代碼 代碼如下:
<!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就可以得到一個具有了這些屬性、方法的對象了。
這時如果要擁有object2就只能把上面來的代碼再寫一份，這是不太好的。
第二種方式: 工廠方式
類似於java中靜態Factory 方法。
複製代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//對象Factory 方法
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>
上面這種方式建立對象有弊端(每個對象都有一個get方法，從而浪費了記憶體),改進後的工廠方式( 所有對象共用一個get方法):
複製代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//所有對象共用的get方法
var get=function(){
alert(this.username+" , "+this.password);
}
//對象Factory 方法
var createObject=function(username,password){
var object=new Object();
object.username=username;
object.password=password;
object.get=get;//注意：這裡不寫方法的括弧
return object;
}
//通過Factory 方法建立對象
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這個屬性。
可以給對象的原型增加一些屬性，方法。
單純的使用原型方式建立對象的缺點：①無法傳參數,只能在對象建立後再改變它的值
②可能會導致程式錯誤
複製代碼 代碼如下:
<!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>
單純使用原型方式定義對象無法再建構函式中為屬性賦初值，只能在對象產生後再去改變屬性值。
第五種方式: 使用原型+建構函式方式來定義對象----推薦使用
對象之間的屬性互不干擾
各個對象之間共用同一個方法
複製代碼 代碼如下:
<!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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
