JavaScript物件導向15分鐘教程

本指南可以很快讓你學會寫優美的物件導向JavaScript程式碼，我保證！學會寫簡潔的JavaScript程式碼對一個開發者的發展很重要，隨著像Node.js這類技術的出現，你現在可以在伺服器端寫JavaScript程式碼了，你甚至可以用JavaScript來查詢像MongoDB這樣的持久性資料儲存。
現在開始寫物件導向的JS（OO JS），如果你有什麼問題或我遺漏了什麼，在下面留言告訴我。
Literal Notation
Literal Notation只是在JavaScript中建立物件的一種方法，是的，方法不只這一種。當你打算建立一個物件實例的時候Literal Notation是首選的方法。
 var bill = {};
上面的程式碼沒什麼用處，只創造了一個空物件。讓我們動態的加入一些屬性和方法到這個物件。
  bill.name = "Bill E Goat";
     bill.sound = function() {
         console.log( 'bahhh!' );
     };
這裡我們添加了“name”屬性並賦值為“Bill E Goat 」。我們不一定要在前面建立空對象，還可以只用一步完成上面 所有的事。
   var bill = {
       name: "Bill E Goat",
       sound: function() {
       };
很簡潔漂亮是不是？存取屬性和方法也一樣很簡單。
 bill.name; // "Bill E Goat"
bill.sound(); // "bahhh"
如果屬性名稱不是一個有效的標識符我們還可以這樣訪問它：
 bill['name']; / / "Bill E Goat"
請注意當呼叫一個方法時我們要在方法名稱後面加上一對括號去呼叫它。讓我們重寫目前的sound方法並傳給它一個參數來呼叫它：
 bill.sound = function(noise) {
    console.log( noise);
};
bill.sound("brrr!"); // "brrr!" He's cold
很好，我們傳入了一個參數(noise),並且在方法的內部訪問了它。下面我們繼續加入一個方法來存取name屬性：
 bill.sayName = function() {
    console.log( "Hello " + this.name );
};
bill.sayName(); // "Hello Bill E Goat"
我們可以透過this.propertyName在一個方法內部存取屬性
 bill.sayName; // function
我們把一個叫sound的本地方法賦值給一個物件sound，現在可以在sound後面加上括號並傳入參數呼叫那個方法了。如果我們試著複製Bill會有什麼結果？
 var sally = 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在記憶體中引用同樣的物件。對一個對象的改變會影響到另一個。
下面再看另一個例子：
 bill.name = "Bill E Goat";
bill.sayName(); // "Hello Bill E Goat";
var sayName = 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看看會發生什麼：
 var name = "Bearded Octo";
sayName(); // "Hello Bearded Octo"
在這裡我們創建了一個全域變數name，並賦值「Bearded Octo」。當我們呼叫sayName方法時它在全域範圍內查找name並訪問到了值“Bearded Octo”，很好。下面來看看Constructor Notation。
Constructor Notation
Constructor Notation是另一種寫入物件導向JavaScript的方法。當你需要為一個物件設定初始屬性值和方法或打算建立一個物件的不同實例但他們的屬性和方法都是不同的，這時首選Constructor Notation方式。下面從建立一個空物件開始：
 function Game() {};
請注意習慣上第一個字母大寫來表示它是一個類別。讓我們來用這個類別來建立新的物件：
 var zelda = new Game();
var smb = new Game();
zelda.title = "Legend of Zelda";
smb.title = "Super Mario Brothers";
zelda.title; // "Legend of Zelda"
smb.title; // "Super Mario Brothers"
我們的物件現在有自己的屬性了！當建立物件時，我們可以在屬性中傳值進去，或是在後面修改。
function Game(title) {
    this.title = typeof title !== 'undefined' ? title : "";
};
var zelda = new Game("Legend of Zelda");
zelda.da.title; Legend of Zelda"
zelda.title = "Ocarina of Time";
zelda.title; // "Ocarina of Time"
var blank = new Game();
blank.title; // ""
第二行可能有點難理解。我們使用了一個三元操作符，它只是一個可以把if else語句區塊寫到一行的方法。他等價於下面的：
 if (typeof title !== 'undefined') {
 this.title = title;
} else {
    this.title = "";
}
//this the s 5% .title = typeof title !== 'undefined' ? title : "";
如果這個物件建立的時候傳入了title參數，物件的title屬性就會被設定。如果沒有傳入，會被設定成預設值」」。
我們可以建立一個方法來存取這個屬性：
 zelda.loveTitle = function() {
    console.log( "I love " + this.title );
};
zelda.loveTitle(); // "I love Ocarina of Time"
那樣看起來很整齊，但是還可以更好。我們可以為Game類別增加一個方法讓所有從Game類別創建的物件都有這個方法：
 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面向對象還有很多方面，以後的教學會再作介紹。