理解JavaScript中的對(duì)象 推薦
更新時(shí)間:2011年01月09日 18:26:01 作者:
JavaScript有一種object數(shù)據(jù)類(lèi)型,但是這種對(duì)象不同于c#或vb中的對(duì)象,在c#中,我們通過(guò)類(lèi)創(chuàng)建一個(gè)對(duì)象,一個(gè)類(lèi)相當(dāng)于創(chuàng)建對(duì)象的模板,定義了對(duì)象的屬性和方法,這些對(duì)象和方法將永遠(yuǎn)固定,我們不能在運(yùn)行時(shí)不能增加對(duì)象的屬性和方法。
在JavaScript沒(méi)有類(lèi)的定義,創(chuàng)建對(duì)象時(shí)沒(méi)有固定的模板,可以動(dòng)態(tài)的創(chuàng)建新的屬性和方法,在動(dòng)態(tài)創(chuàng)建新屬性的時(shí)候,我們能做的就是為這個(gè)屬性創(chuàng)建新的值,下面一個(gè)例子就是創(chuàng)建一個(gè)對(duì)象并增加x,y兩個(gè)屬性。
var Programmer = new Object();
Programmer.name = "Young";
Programmer.age = 25;
alert(Programmer.name + " : " + Programmer.age);
JavaScript對(duì)象完全不同于c#或vb對(duì)象,JavaScript對(duì)象可以看成一組健/值對(duì)的集合,用對(duì)象.屬性名來(lái)訪問(wèn)一個(gè)對(duì)象屬性。我們可以把JavaScript對(duì)象看成.NET framework中Dictionary類(lèi),我們可以通過(guò)"[]"操作符來(lái)創(chuàng)建對(duì)象屬性。
var Programmer = new Object();
Programmer["name"] = "Young";
Programmer["age"]= 25;
document.getElementById("message").innerHTML=Programmer["name"] + " : " + Programmer["age"];
alert(Programmer.name + " : " + Programmer.age); 通過(guò)上面的例子可以發(fā)現(xiàn)兩種訪問(wèn)對(duì)象的方法是一樣的。如果一個(gè)屬性沒(méi)有創(chuàng)建,將返回"undefined"。
我們同樣可以將函數(shù)添加為健/值對(duì)集合的值,這樣就構(gòu)建為對(duì)象的方法,
var Programmer = new Object();
Programmer["name"] = "Young";
Programmer.age= 25;
Programmer.speak=function(){
alert(this.name + " : " + this["age"]);
}
Programmer.speak();
在上面的代碼中我們交替使用"."和"[]"來(lái)定義可訪問(wèn)屬性、方法,者=這兩種方法的一樣的,有時(shí)這些操作符會(huì)導(dǎo)致一些概念上的混淆,在為一個(gè)已經(jīng)存在的屬性設(shè)置新值是表達(dá)的不是很清晰,下面我們介紹第三種語(yǔ)法可以更加明確的表達(dá)我們的意圖。
var Programmer =
{
name : "Young",
age : 25,
speak : function(){ alert(this.name + " : " + this.age); }
}
Programmer.speak(); 上面的代碼更加清晰的表達(dá)了對(duì)象初始化的開(kāi)始和結(jié)束,我們還可以用這種方法在獨(dú)享中嵌套對(duì)象。 var Programmer =
{
Figure : {name : "Young" , age : 25 },
Company : {name : " Arcadia" , address : "ShenZheng"},
speak : function(){
alert("name:"+this.Figure.name+"\nage:"+this.Figure.age + "\nCompany:"+this.Company.name+" of
"+this.Company.address);
}
};
Programmer.speak();
這種語(yǔ)法因?yàn)槠淝逦囊鈭D和緊湊的代碼格局而非常流行,你可以在各種流行的JavaScript frameworks中看到,包括目前在互聯(lián)網(wǎng)上流行的JavaScript Object Notation(JSON),JSON是一種輕量級(jí)的數(shù)據(jù)交換格式,同時(shí)也易于機(jī)器解析和生成,語(yǔ)法也非常嚴(yán)格。JSON允許JavaScript在互聯(lián)網(wǎng)上交換數(shù)據(jù),我們可以用eval將JSON對(duì)象轉(zhuǎn)化為本地JavaScript對(duì)象。
var Programmer="({name: 'Young',age : 25})";
var p = eval(Programmer);
alert(p.name + ',' + p.age);
通過(guò)上面的討論我們知道了明白了所有的JavaScript對(duì)象都是一組字典。在JavaScript中還有另外一個(gè)重要的東西——函數(shù)。
1:在JavaScript中,函數(shù)都是一個(gè)對(duì)象。這一點(diǎn)完全不同于c#中的方法。我們看下面一個(gè)例子。
function add(point1, point2)
{
var result = {
x : point1.x + point2.x,
y : point1.y + point2.y
}
return result;
}
var p1 = { x: 1, y: 1 };
var p2 = { x: 2, y: 2 };
var p3 = add(p1, p2);
alert(p3.x + "," + p3.y);2:將函數(shù)作為對(duì)象的方法。 var Boy=
{
name:"Young",
Love:function(Girl){
return this.name+" 愛(ài)上了 "+Girl.name
}
}
var Girl={
name:"Jing"
}
alert(Boy.Love(Girl));
現(xiàn)在問(wèn)題是兩個(gè)類(lèi)似的對(duì)象,一個(gè)有l(wèi)ove方法,一個(gè)沒(méi)有,因?yàn)槲覀儾](méi)有定義類(lèi)似c#的類(lèi),而只是簡(jiǎn)單的創(chuàng)建兩個(gè)對(duì)象,如果你期望在兩個(gè)對(duì)象都有l(wèi)ove方法可以象下面那樣定義。
function LoveRelation(person){
alert(this.name+" 愛(ài)上了 "+person.name);
}
var person1={
name:"Young",
Love:LoveRelation
}
var person2={
name:"Jing",
Love:LoveRelation
}
person1.Love(person2);
上面的代碼看上去想創(chuàng)建一個(gè)person類(lèi),然后創(chuàng)建person類(lèi)兩個(gè)實(shí)例,以使這兩個(gè)實(shí)例具有相同的特征,顯然上面代碼不夠。我們可以通過(guò)兩種途徑來(lái)滿足這種要求。
途徑1:
function Person(n)
{
this.name=n;
this.Love=function(person)
{
alert(this.name+" 愛(ài)上了 "+person.name);
}
}
var person1=new Person("Young");
var person2=new Person("Jing");
person1.Love(person2);
途徑2:利用JavaSctipt對(duì)象的prototype屬性。
function Person(n)
{
this.name=n;
}
Person.prototype.Love=function(person)
{
alert(this.name+" 愛(ài)上了 "+person.name);
}
var person1=new Person("Young");
var person2=new Person("Jing");
person1.Love(person2);
person2.Love(person1);
上面的例子中,我們可以將Person函數(shù)看成Person對(duì)象的構(gòu)造器,而所有通過(guò)此構(gòu)造器構(gòu)造出來(lái)的對(duì)象共用一個(gè)prototype屬性。
在Douglas Crockford的<a >Private Members In JavaScript"</a>中,作者為我們?cè)敿?xì)的演示了如何創(chuàng)建對(duì)象的私有成員,其思想不再詳細(xì)講解,我們簡(jiǎn)單的重寫(xiě)一下那個(gè) demo
function Point(x, y)
{
this.get_x = function() { return x; }
this.set_x = function(value) { x = value; }
this.get_y = function() { return y; }
this.set_y = function(value) { y = value; }
}
Point.prototype.print = function()
{
return this.get_x() + ',' + this.get_y();
}
var p = new Point(2,2);
p.set_x(4);
alert(p.print());
最后我們講解一下javascript對(duì)象的命名空間,命名空間可以削除一些同名類(lèi)型間的沖突,學(xué)習(xí)過(guò)c#的朋友對(duì)這點(diǎn)一定非常清除了,我們可以在javascript中通過(guò)以下代碼開(kāi)定義命名空間。 var Arcadia = {}
Arcadia.Person=function(n)
{
this.name=n;
}
Arcadia.Person.prototype.Love=function(person)
{
alert(this.name+" 愛(ài)上了 "+person.name);
}
var person1=new Arcadia.Person("Young");
var person2=new Arcadia.Person("Jing");
person1.Love(person2);
復(fù)制代碼 代碼如下:
var Programmer = new Object();
Programmer.name = "Young";
Programmer.age = 25;
alert(Programmer.name + " : " + Programmer.age);
JavaScript對(duì)象完全不同于c#或vb對(duì)象,JavaScript對(duì)象可以看成一組健/值對(duì)的集合,用對(duì)象.屬性名來(lái)訪問(wèn)一個(gè)對(duì)象屬性。我們可以把JavaScript對(duì)象看成.NET framework中Dictionary類(lèi),我們可以通過(guò)"[]"操作符來(lái)創(chuàng)建對(duì)象屬性。
復(fù)制代碼 代碼如下:
var Programmer = new Object();
Programmer["name"] = "Young";
Programmer["age"]= 25;
document.getElementById("message").innerHTML=Programmer["name"] + " : " + Programmer["age"];
alert(Programmer.name + " : " + Programmer.age); 通過(guò)上面的例子可以發(fā)現(xiàn)兩種訪問(wèn)對(duì)象的方法是一樣的。如果一個(gè)屬性沒(méi)有創(chuàng)建,將返回"undefined"。
我們同樣可以將函數(shù)添加為健/值對(duì)集合的值,這樣就構(gòu)建為對(duì)象的方法,
復(fù)制代碼 代碼如下:
var Programmer = new Object();
Programmer["name"] = "Young";
Programmer.age= 25;
Programmer.speak=function(){
alert(this.name + " : " + this["age"]);
}
Programmer.speak();
在上面的代碼中我們交替使用"."和"[]"來(lái)定義可訪問(wèn)屬性、方法,者=這兩種方法的一樣的,有時(shí)這些操作符會(huì)導(dǎo)致一些概念上的混淆,在為一個(gè)已經(jīng)存在的屬性設(shè)置新值是表達(dá)的不是很清晰,下面我們介紹第三種語(yǔ)法可以更加明確的表達(dá)我們的意圖。
復(fù)制代碼 代碼如下:
var Programmer =
{
name : "Young",
age : 25,
speak : function(){ alert(this.name + " : " + this.age); }
}
Programmer.speak(); 上面的代碼更加清晰的表達(dá)了對(duì)象初始化的開(kāi)始和結(jié)束,我們還可以用這種方法在獨(dú)享中嵌套對(duì)象。 var Programmer =
{
Figure : {name : "Young" , age : 25 },
Company : {name : " Arcadia" , address : "ShenZheng"},
speak : function(){
alert("name:"+this.Figure.name+"\nage:"+this.Figure.age + "\nCompany:"+this.Company.name+" of
"+this.Company.address);
}
};
Programmer.speak();
這種語(yǔ)法因?yàn)槠淝逦囊鈭D和緊湊的代碼格局而非常流行,你可以在各種流行的JavaScript frameworks中看到,包括目前在互聯(lián)網(wǎng)上流行的JavaScript Object Notation(JSON),JSON是一種輕量級(jí)的數(shù)據(jù)交換格式,同時(shí)也易于機(jī)器解析和生成,語(yǔ)法也非常嚴(yán)格。JSON允許JavaScript在互聯(lián)網(wǎng)上交換數(shù)據(jù),我們可以用eval將JSON對(duì)象轉(zhuǎn)化為本地JavaScript對(duì)象。
復(fù)制代碼 代碼如下:
var Programmer="({name: 'Young',age : 25})";
var p = eval(Programmer);
alert(p.name + ',' + p.age);
通過(guò)上面的討論我們知道了明白了所有的JavaScript對(duì)象都是一組字典。在JavaScript中還有另外一個(gè)重要的東西——函數(shù)。
1:在JavaScript中,函數(shù)都是一個(gè)對(duì)象。這一點(diǎn)完全不同于c#中的方法。我們看下面一個(gè)例子。
復(fù)制代碼 代碼如下:
function add(point1, point2)
{
var result = {
x : point1.x + point2.x,
y : point1.y + point2.y
}
return result;
}
var p1 = { x: 1, y: 1 };
var p2 = { x: 2, y: 2 };
var p3 = add(p1, p2);
alert(p3.x + "," + p3.y);2:將函數(shù)作為對(duì)象的方法。 var Boy=
{
name:"Young",
Love:function(Girl){
return this.name+" 愛(ài)上了 "+Girl.name
}
}
var Girl={
name:"Jing"
}
alert(Boy.Love(Girl));
現(xiàn)在問(wèn)題是兩個(gè)類(lèi)似的對(duì)象,一個(gè)有l(wèi)ove方法,一個(gè)沒(méi)有,因?yàn)槲覀儾](méi)有定義類(lèi)似c#的類(lèi),而只是簡(jiǎn)單的創(chuàng)建兩個(gè)對(duì)象,如果你期望在兩個(gè)對(duì)象都有l(wèi)ove方法可以象下面那樣定義。
復(fù)制代碼 代碼如下:
function LoveRelation(person){
alert(this.name+" 愛(ài)上了 "+person.name);
}
var person1={
name:"Young",
Love:LoveRelation
}
var person2={
name:"Jing",
Love:LoveRelation
}
person1.Love(person2);
上面的代碼看上去想創(chuàng)建一個(gè)person類(lèi),然后創(chuàng)建person類(lèi)兩個(gè)實(shí)例,以使這兩個(gè)實(shí)例具有相同的特征,顯然上面代碼不夠。我們可以通過(guò)兩種途徑來(lái)滿足這種要求。
途徑1:
復(fù)制代碼 代碼如下:
function Person(n)
{
this.name=n;
this.Love=function(person)
{
alert(this.name+" 愛(ài)上了 "+person.name);
}
}
var person1=new Person("Young");
var person2=new Person("Jing");
person1.Love(person2);
途徑2:利用JavaSctipt對(duì)象的prototype屬性。
復(fù)制代碼 代碼如下:
function Person(n)
{
this.name=n;
}
Person.prototype.Love=function(person)
{
alert(this.name+" 愛(ài)上了 "+person.name);
}
var person1=new Person("Young");
var person2=new Person("Jing");
person1.Love(person2);
person2.Love(person1);
上面的例子中,我們可以將Person函數(shù)看成Person對(duì)象的構(gòu)造器,而所有通過(guò)此構(gòu)造器構(gòu)造出來(lái)的對(duì)象共用一個(gè)prototype屬性。
在Douglas Crockford的<a >Private Members In JavaScript"</a>中,作者為我們?cè)敿?xì)的演示了如何創(chuàng)建對(duì)象的私有成員,其思想不再詳細(xì)講解,我們簡(jiǎn)單的重寫(xiě)一下那個(gè) demo
復(fù)制代碼 代碼如下:
function Point(x, y)
{
this.get_x = function() { return x; }
this.set_x = function(value) { x = value; }
this.get_y = function() { return y; }
this.set_y = function(value) { y = value; }
}
Point.prototype.print = function()
{
return this.get_x() + ',' + this.get_y();
}
var p = new Point(2,2);
p.set_x(4);
alert(p.print());
最后我們講解一下javascript對(duì)象的命名空間,命名空間可以削除一些同名類(lèi)型間的沖突,學(xué)習(xí)過(guò)c#的朋友對(duì)這點(diǎn)一定非常清除了,我們可以在javascript中通過(guò)以下代碼開(kāi)定義命名空間。 var Arcadia = {}
復(fù)制代碼 代碼如下:
Arcadia.Person=function(n)
{
this.name=n;
}
Arcadia.Person.prototype.Love=function(person)
{
alert(this.name+" 愛(ài)上了 "+person.name);
}
var person1=new Arcadia.Person("Young");
var person2=new Arcadia.Person("Jing");
person1.Love(person2);
相關(guān)文章
javascript Array.prototype.slice的使用示例
javascript Array.prototype.slice除了常見(jiàn)的從某個(gè)數(shù)組中抽取出新的數(shù)組外,它還有一些其他的用法,下面就為大家講這些妙用2013-11-11HTML+JavaScript模擬實(shí)現(xiàn)簡(jiǎn)單的時(shí)鐘效果
在這篇文章中,主要將向大家展示如何使用?HTML、CSS?和?JavaScript代碼制作模擬時(shí)鐘,文中的示例代碼講解詳細(xì),感興趣的可以了解一下2022-08-08js中對(duì)函數(shù)設(shè)置默認(rèn)參數(shù)值的3種方法
這篇文章主要介紹了js中對(duì)函數(shù)設(shè)置默認(rèn)參數(shù)值的3種方法嗎,3種方法都具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-10-10JS與CSS3實(shí)現(xiàn)圖片響應(yīng)鼠標(biāo)移動(dòng)放大效果示例
這篇文章主要介紹了JS與CSS3實(shí)現(xiàn)圖片響應(yīng)鼠標(biāo)移動(dòng)放大效果,結(jié)合實(shí)例形式分析了javascript與css3響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素屬性實(shí)現(xiàn)圖片放大效果相關(guān)操作技巧,需要的朋友可以參考下2018-05-05小程序?qū)崿F(xiàn)頁(yè)面多級(jí)來(lái)回切換的示例代碼
這篇文章主要為大家詳細(xì)介紹了小程序如何頁(yè)面多級(jí)來(lái)回切換支持滑動(dòng)和點(diǎn)擊操作,文中的實(shí)現(xiàn)步驟講解詳細(xì),快跟隨小編一起動(dòng)手嘗試一下吧2022-07-07JS動(dòng)態(tài)修改網(wǎng)頁(yè)body的背景色實(shí)例代碼
這篇文章主要介紹了JS動(dòng)態(tài)修改網(wǎng)頁(yè)body的背景色實(shí)例代碼 ,需要的朋友可以參考下2017-10-10