JavaScript麵向對象

當前實例版本：21 1 評論 957 瀏覽發布於：2013年11月16 07:45 編輯 +新實例

本實例主要麵向對象JavaScript編程，學會寫簡潔的JavaScript代碼對一個開發者的發展很重要，隨著像Node.js這類技術的出現，你現在可以在服務器端寫JavaScript代碼了，甚至可以用JavaScript來查詢像MongoDB這樣的持久性數據存儲。

現在開始寫麵向對象的JS（OO JS），如果你有什麼問題或我遺漏了什麼，在下麵評論出告訴我。

Literal Notation

Literal Notation隻是在JavaScript中創建對象的一種方法，是的，方法不止這一種。當創建一個對象實例的時候Literal Notation是首選的方法。

		
							1
						
								 varbill = {};

上麵的代碼冇太大用處，僅僅隻是創建了一個空對象。讓我們動態的添加一些屬性和方法到這個對象。

		
							1
						
							2
						
							3
						
							4
						
								 bill.name ="Bill E Goat";
							
								     bill.sound =function() {
							
								        console.log('bahhh!');
							
								     };

這裡我們添加了“name”屬性並賦值為“Bill E Goat”。我們不一定要在前麵創建空對象，還可以隻用一步完成上麵所有的事。

		
							1
						
							2
						
							3
						
							4
						
							5
						
							6
						
								  varbill = {
							
								      name:"Bill E Goat",
							
								      sound:function() {
							
								        console.log('bahhh!');
							
								      }
							
								     };

很簡潔漂亮是不是？訪問屬性和方法也一樣很簡單。

		
								 bill.name;// "Bill E Goat"
							
								 bill.sound();// "bahhh"

如果屬性名不是一個有效的標識符我們還可以這麼訪問它：

		
								 bill['name'];// "Bill E Goat"

請注意當調用一個方法時我們要在方法名後麵添加一對括號去調用它。讓我們重寫當前的sound方法並傳給它一個參數來調用它：

		
							1
						
							2
						
							3
						
							4
						
								 bill.sound =function(noise) {
							
								    console.log( noise);
							
								 };
							
								 bill.sound("brrr!");// "brrr!" He's cold

很好，我們傳入了一個參數(noise),並且在方法的內部訪問了它。下麵我們繼續添加一個方法來訪問name屬性：

		
							1
						
							2
						
							3
						
							4
						
								 bill.sayName =function() {
							
								    console.log("Hello "+this.name );
							
								 };
							
								 bill.sayName();// "Hello Bill E Goat"

我們可以通過this.propertyName在一個方法內部訪問屬性

		
							1
						
								bill.sayName;// function

我們把一個叫sound的本地方法賦值給一個對象sound，現在可以在sound後麵添加括號並傳入參數調用那個方法了。如果我們試著克隆Bill會有什麼結果？

		
							1
						
							2
						
							3
						
							4
						
							5
						
								 varsally = bill;
							
								 sally.name;// "Bill E Goat", But her name is Sally silly
							
								 sally.name ="Sally";
							
								 sally.name;// "Sally", Better
							
								 bill.name;// "Sally", Oh no what happened to Bill

在上麵的例子中我們創建了一個新的變量sally，並讓它和bill相等。現在sally和bill在內存中引用同樣的對象。對一個對象的改變會影響到另一個。

下麵再看另外一個例子：

		
							1
						
							2
						
							3
						
							4
						
							5
						
								 bill.name ="Bill E Goat";
							
								 bill.sayName();// "Hello Bill E Goat";
							
								 varsayName = bill.sayName;
							
								 sayName;// function, OK so far so good
							
								 sayName();// "Hello ", huh why didn't it print out Bills name?

bill的name屬性是一個本地變量，sayName方法是在全局範圍內創建的，所以this.name會在全局範圍內查找name的值。但問題是name冇有定義。讓我們來定義一個全局變量name看看會發生什麼：

		
							1
						
							2
						
								 varname ="Bearded Octo";
							
								 sayName();// "Hello Bearded Octo"

在這裡我們創建了一個全局變量name，並賦值“Bearded Octo”。當我們調用sayName方法時它在全局範圍內查找name並訪問到了值“Bearded Octo”，很好。下麵看看Constructor Notation。

Constructor Notation

Constructor Notation是另外一種寫麵向對象JavaScript的方法。當你需要為一個對象設置初始屬性值和方法或者打算創建一個對象的不同實例但他們的屬性和方法都是不同的，這時首選Constructor Notation方式。下麵從創建一個空對象開始：

		
							1
						
								 functionGame() {};

請注意習慣上第一個字母大寫來表示它是一個類。我們來用這個類創建新的對象：

		
							1
						
							2
						
							3
						
							4
						
							5
						
							6
						
								 varzelda =newGame();
							
								 varsmb =newGame();
							
								 zelda.title ="Legend of Zelda";
							
								 smb.title ="Super Mario Brothers";
							
								 zelda.title;// "Legend of Zelda"
							
								 smb.title;// "Super Mario Brothers"

我們的對象現在有自己的屬性了！當創建對象時，我們可以在屬性中傳值進去，或者在後麵修改。

		
							1
						
							2
						
							3
						
							4
						
							5
						
							6
						
							7
						
							8
						
							9
						
								 functionGame(title) {
							
								    this.title =typeoftitle !=='undefined'? title :"";
							
								 };
							
								 varzelda =newGame("Legend of Zelda");
							
								 zelda.title;// "Legend of Zelda"
							
								 zelda.title ="Ocarina of Time";
							
								 zelda.title;// "Ocarina of Time"
							
								 varblank =newGame();
							
								 blank.title;// ""

第二行可能有點難理解。我們使用了一個三元操作符，它隻是一種可以把if else語句塊寫到一行的方法。他等價於下麵的：

		
							1
						
							2
						
							3
						
							4
						
							5
						
							6
						
							7
						
								 if(typeoftitle !=='undefined') {
							
								  this.title = title;
							
								 }else{
							
								    this.title ="";
							
								 }
							
								 // Is the same as
							
								 this.title =typeoftitle !=='undefined'? title :"";

如果這個對象創建的時候傳入了title參數，對象的title屬性就會被設置。如果冇有傳入，會被設置成默認值””。

我們可以創建一個方法來訪問這個屬性：

		
							1
						
							2
						
							3
						
							4
						
								 zelda.loveTitle =function() {
							
								    console.log("I love "+this.title );
							
								 };
							
								 zelda.loveTitle();// "I love Ocarina of Time"

那樣看起來很整齊，但是還可以更好。我們可以給Game類添加一個方法讓所有從Game類創建的對象都有這個方法：

		
							1
						
							2
						
							3
						
							4
						
							5
						
								 Game.prototype.heartIt =function() {
							
								    console.log("I heart "+this.title );
							
								 };
							
								 zelda.heartIt();// "I heart Ocarina of Time"
							
								 smb.heartIt();// "I heart Super Mario Brothers

本指南可以很快讓你學會寫優美的麵向對象JavaScript代碼，我保證！學會寫簡潔的JavaScript代碼對一個開發者的發展很重要，隨著像Node.js這類技術的出現，你現在可以在服務器端寫JavaScript代碼了，你甚至可以用JavaScript來查詢像MongoDB這樣的持久性數據存儲。