快捷導(dǎo)航

JavaScript創(chuàng)建類/對(duì)象的幾種方式概述及實(shí)例

更新時(shí)間：2013年05月06日 17:56:24 作者：

JS中的對(duì)象強(qiáng)調(diào)的是一種復(fù)合類型，JS中創(chuàng)建對(duì)象及對(duì)對(duì)象的訪問(wèn)是極其靈活的，下面與大家分享下創(chuàng)建類/對(duì)象的幾種方式，感興趣的朋友可以了解下哈

在JS中，創(chuàng)建對(duì)象（Create Object）并不完全是我們時(shí)常說(shuō)的創(chuàng)建類對(duì)象，JS中的對(duì)象強(qiáng)調(diào)的是一種復(fù)合類型，JS中創(chuàng)建對(duì)象及對(duì)對(duì)象的訪問(wèn)是極其靈活的。

JS對(duì)象是一種復(fù)合類型，它允許你通過(guò)變量名存儲(chǔ)和訪問(wèn)，換一種思路，對(duì)象是一個(gè)無(wú)序的屬性集合，集合中的每一項(xiàng)都由名稱和值組成（聽(tīng)起來(lái)是不是很像我們常聽(tīng)說(shuō)的HASH表、字典、健/值對(duì)？），而其中的值類型可能是內(nèi)置類型(如number,string)，也可能是對(duì)象。
一、由一對(duì)大括號(hào)括起來(lái)

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

 
var emptyObj = {}; 
var myObj = 
{ 
'id': 1, //屬性名用引號(hào)括起來(lái)，屬性間由逗號(hào)隔開(kāi) 
'name': 'myName' 
}; 
//var m = new myObj(); //不支持 

　不知你注意到對(duì)象都是用 var 聲明的沒(méi)有，像上面的代碼，就只是簡(jiǎn)單的聲明一個(gè)對(duì)象，它只有一份拷貝，你不能像實(shí)例化類對(duì)象一樣對(duì)它采用new操作，像上面代碼的注釋部分。這樣就極大的限制了對(duì)象的重用，除非你建立的對(duì)象只需要一份拷貝，否則考慮用其他方法建立對(duì)象。
　　下面一起看看如何訪問(wèn)對(duì)象的屬性和方法。

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

 
var myObj = 
{ 
'id': 1, 
'fun': function() { 
document.writeln(this.id + '-' + this.name);//以"對(duì)象.屬性"方式訪問(wèn) 
}, 
'name': 'myObj', 
'fun1': function() { 
document.writeln(this['id'] + '+' + this['name']);//以集合方式訪問(wèn) 
} 
}; 
myObj.fun(); 
myObj.fun1(); 
// 結(jié)果 
// 1-myObj 1+myObj 

二、用 function 關(guān)鍵字模擬 class
在 function 中用 this 引用當(dāng)前對(duì)象，通過(guò)對(duì)屬性的賦值來(lái)聲明屬性。如果用var聲明變量，則該變量為局部變量，只允許在類定義中調(diào)用。

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

 
function myClass() { 
this.id = 5; 
this.name = 'myclass'; 
this.getName = function() { 
return this.name; 
} 
} 
var my = new myClass(); 
alert(my.id); 
alert(my.getName()); 
// 結(jié)果 
// 5 
// myclass 

三、在函數(shù)體中創(chuàng)建一個(gè)對(duì)象，聲明其屬性再返回
在函數(shù)體中創(chuàng)建對(duì)象可利用第一點(diǎn)的方法，或先 new Object(); 再為各屬性賦值。
不過(guò)用這種方式創(chuàng)建的對(duì)象在VS2008 SP1中是沒(méi)有智能提示的。

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

 
function myClass() { 
var obj = 
{ 
'id':2, 
'name':'myclass' 
}; 
return obj; 
} 
function _myClass() { 
var obj = new Object(); 
obj.id = 1; 
obj.name = '_myclass'; 
return obj; 
} 
var my = new myClass(); 
var _my = new _myClass(); 
alert(my.id); 
alert(my.name); 
alert(_my.id); 
alert(_my.name); 
// 結(jié)果 
// 2 
// myclass 
// 1 
// _myclass 