高手教你15分鐘掌握JavaScript物件導向編程

經常看到一些JavaScript的代碼髒亂得無法理解，到處都是屬性和方法，或者一個迴圈套著一個迴圈。但如果使用物件導向就能很好的理清代碼，並方便理解和修改代碼。如果你不希望自己的代碼只有上帝理解的話，就請盡量考慮使用物件導向的模式。

到處都是屬性、方法，代碼極其難懂，天哪，我的程式員，你究竟在做什嗎？仔細看看這篇指南，讓我們一起寫出優雅的物件導向的JavaScript代碼吧！

作為一個開發人員，能否寫出優雅的代碼對於你的職業生涯至關重要。隨著像Node.js這類技術的發展，你甚至可以在伺服器端使用JavaScript了。同樣的，你也可以使用JavaScript來控制MongoDB的持續資料存放區。

文本標記

文本標記只是JavaScript裡建立對象的一種方法，當然這裡肯定不止這一種，但它是你在只打算建立一個對象執行個體時的首選方法。

1. var bill = {};  

上面的代碼並不實用，它只是一個Null 物件。接下來我們動態地向這個對象中添加一些屬性和方法。

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

這裡添加了屬性name，並且給它分配了值"Bill E Goat"。我們並不需要先建立一個Null 物件，而可以把所有代碼直接寫在一對括弧裡。

 

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

是不是很美觀？訪問它的屬性和方法就像呼吸一樣簡單、自然。

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

如果屬性名稱不是一個合法的標誌符，我們還可以這樣訪問它：

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

注意：我在調用方法時在其後添加了圓括弧。現在，我們再重寫一下當前的sound方法，並添加一個參數。

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

很好，我們已經傳入參數了，並且在方法定義中訪問了它。接下來，向對象中增加一個新方法來訪問name屬性。

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

我們可以使用this.propertyName（在本例中即this.name）在方法內訪問屬性。

1. bill.sayName; // function 

怎麼回事？訪問sayName方法返回了一個方法定義。現在讓我們再深入些。

1. var sound = bill.sound; 
2. sound('moo!'); // "moo!" 

現在我們指定了sound方法為一個局部函數，可以調用這個函數並且傳遞參數。你認為在複製bill的時候會發生什嗎？（類比下複製羊Dolly）

1. var sally = bill; 
2. sally.name; // "Bill E Goat"，可它的名字是Sally
3. sally.name = "Sally"; 
4. sally.name; // "Sally"，好些了
5. bill.name; // "Sally"，問題又轉移到bill身上了

上面的例子中我們建立了一個變數sally，並使它和bill相同，所以bill和sally會在記憶體中引用了同一個對象。這時候給改變一塊它們就會同時發生改變。再看看下面這段代碼：

1. bill.name = "Bill E Goat"; 
2. bill.sayName(); // "Hello Bill E Goat"; 
3. var sayName = bill.sayName; 
4. sayName; // function 目前為止一切順利
5. sayName(); // "Hello "，為什麼這裡又不再顯示bill的名字了？

bill的name是一個本地執行個體變數，只對bill可得。當sayName方法被建立為全域變數時，當它碰到this.name聲明時，它會在全域尋找name的值。唯一的問題在於name還沒有被定義。現在讓我們在全域定義name，看看會發生什麼：

1. var name = "Bearded Octo"; 
2. sayName(); // "Hello Bearded Octo" 

這裡我們在全域範圍內定義了name變數，並且賦予了值"Bearded Octo"。當我們在調用sayHello方法時它會在全域範圍內尋找name變數，最終會獲得值"Bearded Octo"。我們為什麼不為這幾個對象建立一個共同的“類”呢？

建構函式

建構函式是另一個編寫物件導向JavaScript代碼的方法，當你需要初始化對象的屬性、方法，或者需要建立多個屬性、方法各不相同的執行個體時，它將是你最佳的選擇。同樣我們先從建立一個Null 物件開始：

1. function Game() {}; 

這個對象包括自己的屬性，你甚至可以在建立對象時傳入屬性，然後再對其進行修改。

1. var zelda = new Game(); 
2. var smb = new Game(); 
3. zelda.title = "Legend of Zelda"; 
4. smb.title = "Super Mario Brothers"; 
5. zelda.title; // "Legend of Zelda" 
6. smb.title; // "Super Mario Brothers" 

現在這個對象已經有自己的方法了！新建立對象時我們甚至可以傳遞屬性，之後再修改。

1. function Game(title) {  
2.     this.title = typeof title !== 'undefined' ? title : "";  
3. };  
4. var zelda = new Game("Legend of Zelda");  
5. zelda.title; // "Legend of Zelda" 
6. zelda.title = "Ocarina of Time"; 
7. zelda.title; // "Ocarina of Time" 
8. var blank = new Game(); 
9. blank.title; // ""  

也許你沒看明白第二行的內容，其實是使用了三元操作來避免單行的if else，它和下面標準的if else語句是一個意思。

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

如果title變數在對象被建立時傳入，title執行個體變數將會指定為title的值。如果沒有值傳入，那麼title將會被初始化為預設值""。我們同樣可以建立一個方法來訪問這個屬性：

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

這樣就很整潔了，但是我們還能做得更好。我們可以在Game類中添加一個方法，這樣所有Game類的執行個體將都能使用此方法。

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

後記：當然這隻是JavaScript物件導向編程的入門，OO JS還有很多內容可以講，如果你有什麼特別希望瞭解的東西可以去作者的輕部落格下方留言。

原文連結：beardedocto.tumblr.com