來源：tsl0922
本指南可以很快讓你學會寫優美的物件導向JavaScript程式碼，我保證！學會寫簡潔的JavaScript程式碼對一個開發者的發展很重要，隨著像Node.js這類技術的出現，你現在可以在伺服器端寫JavaScript程式碼了，你甚至可以用JavaScript來查詢像MongoDB這樣的永續性資料儲存。
現在開始寫物件導向的JS（OO JS），如果你有什麼問題或我遺漏了什麼，在下面評論出告訴我。
Literal Notation
Literal Notation只是在JavaScript中建立物件的一種方法，是的，方法不止這一種。當你打算建立一個物件例項的時候Literal Notation是首選的方法。
|
1 |
var bill = {}; |
上面的程式碼沒太大用處，僅僅只是建立了一個空物件。讓我們動態的新增一些屬性和方法到這個物件。
|
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 |
var bill = { name: "Bill E Goat", sound: function() { console.log( 'bahhh!' ); } }; |
很簡潔漂亮是不是？訪問屬性和方法也一樣很簡單。
|
1 2 |
bill.name; // "Bill E Goat" bill.sound(); // "bahhh" |
如果屬性名不是一個有效的識別符號我們還可以這麼訪問它：
|
1 |
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 |
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在記憶體中引用同樣的物件。對一個物件的改變會影響到另一個。
下面再看另外一個例子：
|
1 2 3 4 5 |
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看看會發生什麼：
|
1 2 |
var name = "Bearded Octo"; sayName(); // "Hello Bearded Octo" |
在這裡我們建立了一個全域性變數name，並賦值“Bearded Octo”。當我們呼叫sayName方法時它在全域性範圍內查詢name並訪問到了值“Bearded Octo”，很好。下面看看Constructor Notation。
Constructor Notation
Constructor Notation是另外一種寫物件導向JavaScript的方法。當你需要為一個物件設定初始屬性值和方法或者打算建立一個物件的不同例項但他們的屬性和方法都是不同的，這時首選Constructor Notation方式。下面從建立一個空物件開始：
|
1 |
function Game() {}; |
請注意習慣上第一個字母大寫來表示它是一個類。我們來用這個類建立新的物件：
|
1 2 3 4 5 6 |
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" |
我們的物件現在有自己的屬性了！當建立物件時，我們可以在屬性中傳值進去，或者在後面修改。
|
1 2 3 4 5 6 7 8 9 |
function Game(title) { this.title = typeof title !== 'undefined' ? title : ""; }; var zelda = new Game("Legend of Zelda"); zelda.title; // "Legend of Zelda" zelda.title = "Ocarina of Time"; zelda.title; // "Ocarina of Time" var blank = new Game(); blank.title; // "" |
第二行可能有點難理解。我們使用了一個三元操作符，它只是一種可以把if else語句塊寫到一行的方法。他等價於下面的：
|
1 2 3 4 5 6 7 |
if (typeof title !== 'undefined') { this.title = title; } else { this.title = ""; } // Is the same as this.title = typeof title !== '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物件導向還有很多方面，以後的教程會再作介紹。如果有什麼問題，請在下面留下評論。感謝您的閱讀！