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() {
    console.log( 'bahhh!' );
  }  
};

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

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

這些代碼會有什么結果。我們不使用括號調用sayName，它返回了一個方法定義。繼續探索！

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

我們把一個叫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.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 = ""; 
} 
// Is the same as 
this.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面向對象還有很多方面，以后的教程會再作介紹。如果有什么問題，請在下面留下評論。感謝您的閱讀！

原文鏈接