JavaScript有一種object數據類型,但是這種對象不同於c#或vb中的對象,在c#中,我們通過類創建一個對象,一個類相當於創建對象的模板,定義了對象的屬性和方法,這些對象和方法將永遠固定,我們不能在運行時不能增加對象的屬性和方法。
在JavaScript沒有類的定義,創建對象時沒有固定的模板,可以動態的創建新的屬性和方法,在動態創建新屬性的時候,我們能做的就是爲這個屬性創建新的值,下面一個例子就是創建一個對象並增加x,y兩個屬性。
<script type="text/javascript"> var Programmer = new Object(); Programmer.name = "Young"; Programmer.age = 25; alert(Programmer.name + " : " + Programmer.age); </script>
JavaScript對象完全不同於c#或vb對象,JavaScript對象可以看成一組健/值對的集合,用對象.屬性名來訪問一個對象屬性。我們可以把JavaScript對象看成.NET framework中Dictionary類,我們可以通過"[]"操作符來創建對象屬性。
<script type="text/javascript"> var Programmer = new Object(); Programmer["name"] = "Young"; Programmer["age"]= 25; //document.getElementById("message").innerHTML=Programmer["name"] + " : " + Programmer["age"]; alert(Programmer.name + " : " + Programmer.age); </script>
通過上面的例子可以發現兩種訪問對象的方法是一樣的。如果一個屬性沒有創建,將返回"undefined"。
我們同樣可以將函數添加爲健/值對集合的值,這樣就構建爲對象的方法,
<script type="text/javascript"> var Programmer = new Object(); Programmer["name"] = "Young"; Programmer.age= 25; Programmer.speak=function(){ alert(this.name + " : " + this["age"]); } Programmer.speak(); </script>
在上面的代碼中我們交替使用"."和"[]"來定義可訪問屬性、方法,者=這兩種方法的一樣的,有時這些操作符會導致一些概念上的混淆,在爲一個已經存在的屬性設置新值是表達的不是很清晰,下面我們介紹第三種語法可以更加明確的表達我們的意圖。
<script type="text/javascript"> var Programmer = { name : "Young", age : 25, speak : function(){ alert(this.name + " : " + this.age); } } Programmer.speak(); </script>
上面的代碼更加清晰的表達了對象初始化的開始和結束,我們還可以用這種方法在獨享中嵌套對象。
<script type="text/javascript"> 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(); </script>
這種語法因爲其清晰的意圖和緊湊的代碼格局而非常流行,你可以在各種流行的JavaScript frameworks中看到,包括目前在互聯網上流行的JavaScript Object Notation(JSON),JSON是一種輕量級的數據交換格式,同時也易於機器解析和生成,語法也非常嚴格。JSON允許JavaScript在互聯網上交換數據,我們可以用eval將JSON對象轉化爲本地JavaScript對象。
<script type="text/javascript"> var Programmer="({name: 'Young',age : 25})"; var p = eval(Programmer); alert(p.name + ',' + p.age); </script>
通過上面的討論我們知道了明白了所有的JavaScript對象都是一組字典。在JavaScript中還有另外一個重要的東西——函數。
1:在JavaScript中,函數都是一個對象。這一點完全不同於c#中的方法。我們看下面一個例子。
<script type="text/javascript"> 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); </script>
2:將函數作爲對象的方法。
<script type="text/javascript"> var Boy= { name:"Young", Love:function(Girl){ return this.name+" 愛上了 "+Girl.name } } var Girl={ name:"Jing" } alert(Boy.Love(Girl)); </script>
現在問題是兩個類似的對象,一個有love方法,一個沒有,因爲我們並沒有定義類似c#的類,而只是簡單的創建兩個對象,如果你期望在兩個對象都有love方法可以象下面那樣定義。
<script type="text/javascript"> function LoveRelation(person){ alert(this.name+" 愛上了 "+person.name); } var person1={ name:"Young", Love:LoveRelation } var person2={ name:"Jing", Love:LoveRelation } person1.Love(person2); </script>
上面的代碼看上去想創建一個person類,然後創建person類兩個實例,以使這兩個實例具有相同的特徵,顯然上面代碼不夠。我們可以通過兩種途徑來滿足這種要求。
途徑1:
<script type="text/javascript"> function Person(n) { this.name=n; this.Love=function(person) { alert(this.name+" 愛上了 "+person.name); } } var person1=new Person("Young"); var person2=new Person("Jing"); person1.Love(person2); </script>
途徑2:利用JavaSctipt對象的prototype屬性。
<script type="text/javascript"> function Person(n) { this.name=n; } Person.prototype.Love=function(person) { alert(this.name+" 愛上了 "+person.name); } var person1=new Person("Young"); var person2=new Person("Jing"); person1.Love(person2); person2.Love(person1); </script>
上面的例子中,我們可以將Person函數看成Person對象的構造器,而所有通過此構造器構造出來的對象共用一個prototype屬性。
在Douglas Crockford的<a href="http://www.crockford.com/javascript/private.html">Private Members In JavaScript"</a>中,作者爲我們詳細的演示瞭如何創建對象的私有成員,其思想不再詳細講解,我們簡單的重寫一下那個demo
<script type="text/javascript"> 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()); </script>
最後我們講解一下javascript對象的命名空間,命名空間可以削除一些同名類型間的衝突,學習過c#的朋友對這點一定非常清除了,我們可以在javascript中通過以下代碼開定義命名空間。
<script type="text/javascript"> var Arcadia = {} Arcadia.Person=function(n) { this.name=n; } Arcadia.Person.prototype.Love=function(person) { alert(this.name+" 愛上了 "+person.name); } var person1=new Arcadia.Person("Young"); var person2=new Arcadia.Person("Jing"); person1.Love(person2); </script>