javascript 定義對象的方式,有6 種:
1.1在已有對象上添加屬性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
</head>
<script type="text/javascript">
//同過已有對象,擴充屬性
var object =new Object();
object.name="zhangsan";
object.sayName=function(name){
this.name=name;
alert(this.name);
}
object.sayName("lisi");
</script>
</html>
1.2 工廠方式創建對象
<script type="text/javascript">
//工廠方式 創建對象
function createObject(){
var object = new Object();
object.username = "hw";
object.password = "810068";
object.get = function(){
alert(this.username + " , " + this.password);
}
return object;
}
var object1 = createObject();
var object2 = createObject();
object1.get();
</script>
<script type="text/javascript">
//工廠方式 創建對象
function createObject(name){
var object = new Object();
object.username = name;
object.password = "81";
object.get = function(){
alert(this.username + " , " + this.password);
}
return object;
}
var object1 = createObject("黃威");
var object2 = createObject("付攀");
object1.get();
</script>
如何讓一個函數對象被多個對象所共享,而不是每一個對象擁有一個函數對象?
方法:把函數放在外面。請看下面的代碼:
<script type="text/javascript">
//使用工廠方法,創建對象
/* 讓一個函數對象被多個對象所共享,而不是每一個對象擁有一個函數對象 :把方法放在外面*/
function get(){
alert(this.username + " , " + this.password);
}
function createObject(name, password){
var object = new Object();
object.username = name;
object.password = password;
object.get = get;
return object;
}
var object1 = createObject("黃威", "456");
var object2 = createObject("付攀", "123");
object1.get();
</script>
1.3 構造函數方式(使用構造方法)
<script type="text/javascript">
function Person(){
//在執行第一行代碼前,js引擎會為我們生成一個對象
this.username="hw";
this.password="root";
this.getInfo=function(){
alert(this.username + " , " + this.password);
}
//此處有一個隱藏的return 語句,用於將之前生成的對象返回。
}
var person=new Person();
person.getInfo();
</script>
<script type="text/javascript">
function Person(name, password){
//在執行第一行代碼前,js引擎會為我們生成一個對象
this.username = name;
this.password = password;
this.getInfo = function(){
alert(this.username + " , " + this.password);
}
//此處有一個隱藏的return 語句,用於將之前生成的對象返回。
}
var person = new Person("wei","444");
person.getInfo();
</script>
1.4 原型(prototype)方式
<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 = "黃";
person1.getInfo();
person2.getInfo();
</script>
單純使用原型方式定義的對象無法在構造函數中為屬性賦初值,隻能在對象生成之後再去改變屬性值。
此方式的缺陷:多個對象之間共享屬性。
1.5 原型+構造函數方式
<script type="text/javascript">
function Person(){
this.username=new Array();
this.password="123";
}
Person.prototype.getInfo=function(){
alert(this.username+" , "+this.password);
}
var p=new Person();
var p2=new Person();
p.username.push("黃威");
p2.username.push("素潔");
p.getInfo();
p2.getInfo();
</script>
1.6 動態原型方式
<script type="text/javascript">
//C:\Documents and Settings\Administrator\My Documents\Aptana Studio Workspace\js00001\javascript002.html
/* 通過動態原型的方式*/
function Person(){
this.username = new Array();
this.password = "123";
if (typeof Person.flag == "undefined") {
alert("invoked");
Person.prototype.getInfo = function(){
alert(this.username + " , " + this.password);
}
Person.flag=true;
}
}
var p = new Person();
var p2 = new Person();
p.username.push("黃威");
p2.username.push("素潔");
p.getInfo();
p2.getInfo();
</script>
以上就是js定義對象的6種方式。
作者“whuang”