當柳上原的風吹向天際的時候...

真正的快樂來源于創造

:: 管理

368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks

JS中對象的定義

JavaScript把其中的對象定義為“屬性的無序集合，每個屬性存放一個原始值，對象或者函數”。
因此，在JavaScript中，對象由特性（atrribute）構成，特性可以是原始值，也可以是引用值。如果特性存放的是函數，它將被看做對象的方法（method），否則該特性被看做屬性（property）。

對象的創建

對象是使用關鍵字new后跟要實例化的類的名字創建的，如：
Var obj=new Object();
Var str=new String();
第一行代碼創建了一個Object類的實例，并把它設定給變量obj；第二行代碼創建了一個String的實例，并把它設定給變量str。
如果構造函數無參數，括號不是必需的。
如果把對象的所有引用都設置為null，可以強制性的廢除對象。

關鍵字this

在JavaScript中，要掌握的最重要的概念之一是關鍵字this的用法，它用在對象的方法中。關鍵字this總是指向調用該方法的對象，如：

<!--

window.onload=function(){

var cube=new Object;

cube.sideLength=6;

cube.getVolumn=function(){

return this.sideLength*this.sideLength*this.sideLength;

}

alert(cube.getVolumn());

}

//-->

</script>

使用構造函數方式創建對象

<!--

window.onload=function(){

// 創建Cube類的一個實例

var cube=new Cube(3,7.8);

// 顯示方塊的體積

alert(cube.getVolumn());

// 顯示方塊的重量

alert(cube.getWeight());

}

function Cube(sideLength,density){

// 給類Cube分配一個屬性sideLength，其值等于sideLength的值

this.sideLength=sideLength;

// 給類Cube分配一個屬性density，其值等于density的值

this.density=density;

// 給類Cube分配一個函數，函數名在等號左邊，函數體在等號右邊

this.getVolumn=function(){

return this.sideLength*this.sideLength*this.sideLength;

}

// 給類Cube分配一個函數，其中調用了本類的其它函數

this.getWeight=function(){

return this.getVolumn()*this.density;

}

//-->

</script>

使用混合的構造函數/原型方式創建對象

<!--

window.onload=function(){

var cube=new Cube(3,7.8);

alert(cube.getVolumn());

alert(cube.getWeight());

}

function Cube(sideLength,density){

this.sideLength=sideLength;

this.density=density;

}

Cube.prototype.getVolumn=function(){

return this.sideLength*this.sideLength*this.sideLength;

}

Cube.prototype.getWeight=function(){

return this.getVolumn()*this.density;

}

//-->

</script>

理解protoType

我們可以把protoType理解為創建新對象所依賴的原型，protoType對象是個模板，要實例化的對象都以這個模板為基礎。總而言之，prototype對象的任何屬性和方法都被傳遞給那個類的所有實例。

使用混合方式創建實例的完整例子

<html>

<head>

<title>使用混合方式創建類實例</title>

</head>

<body>

<div>

<TR>

</TR>

</tbody>

</table>

</div>

<hr/>

<div>

姓名:<input type="text" name="name"/><br/>

年齡:<input type="text" name="age"/><br/>

</div>

</body>

</html>

<!--

function $(id){

return document.getElementById(id);

}

window.onload=function(){

$("btn").onclick=function(){

var emp=new Employee($("name").value,$("age").value);

$("personList").appendChild(emp.getInfoLine());

$("name").value="";

$("age").value="";

}

var sn=0;

function Employee(name,age){

sn++;

this.name=name;

this.age=age;

}

Employee.prototype.getName=function(){

return this.name;

}

Employee.prototype.getAge=function(){

return this.age;

}

Employee.prototype.getInfoLine=function(){

var row=document.createElement("tr");

row.setAttribute("height",20);

var cell1=document.createElement("td");

cell1.appendChild(document.createTextNode(sn));

row.appendChild(cell1);

var cell2=document.createElement("td");

cell2.appendChild(document.createTextNode(this.name));

row.appendChild(cell2);

var cell3=document.createElement("td");

cell3.appendChild(document.createTextNode(this.age));

row.appendChild(cell3);

return row;

}

//-->

</script>

posted on 2009-02-26 12:07 何楊閱讀(206) 評論(0) 編輯收藏

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

當柳上原的風吹向天際的時候...

公告

常用鏈接

留言簿(3)

隨筆分類

相冊

個人常用鏈接

最新隨筆

積分與排名

最新評論

閱讀排行榜