快速學習JavaScript面向對象編程

處處都是屬性、方法，代碼極其難懂，天哪，個人程序員，你究竟在作什麼？仔細看看這篇指南，讓咱們一塊兒寫出優雅的面向對象的JavaScript代碼吧！

　　做爲一個開發者，可否寫出優雅的代碼對於你的職業生涯相當重要。隨着像Node.js這類技術的發展，你甚至能夠在服務器端使用JavaScript了。一樣的，你也可使用JavaScript來控制MongoDB的持續數據存儲。

　　文本標記

　　文本標記只是JavaScript裏建立對象的一種方法，固然這裏確定不止這一種，但它是你在只打算建立一個對象實例時的首選方法。

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!' );
}
};

//keleyi.com

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

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 :)

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

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

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

bill.sayName; // function

 

怎麼回事？訪問sayName方法返回了一個方法定義。如今讓咱們再深刻些。

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

如今咱們指定了sound方法爲一個局部函數，能夠調用這個函數而且傳遞參數。你認爲在複製bill的時候會發生什麼？（類比下克隆羊Dolly）

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

上面的例子中咱們新建了一個變量sally，並使它和bill相同，因此bill和sally會在內存中引用了同一個對象。這時候給改變一塊它們就會同時發生改變。再看看下面這段代碼：

bill.name = "Bill E Goat";
bill.sayName(); // "Hello Bill E Goat";
var sayName = bill.sayName;
sayName; // function 目前爲止一切順利
sayName(); // "Hello "，爲何這裏又再也不顯示bill的名字了？

bill的name是一個本地實例變量，只對bill可得。當sayName方法被建立爲全局變量時，當它碰到this.name聲明時，它會在全局查找name的值。惟一的問題在於name尚未被定義。如今讓咱們在全局定義name，看看會發生什麼：

var name = "Bearded Octo";

 sayName(); // "Hello Bearded Octo"

//keleyi.com

這裏咱們在全局範圍內定義了name變量，而且賦予了值"Bearded Octo"。當咱們在調用sayHello方法時它會在全局範圍內查找name變量，最終會得到值"Bearded Octo"。咱們爲何不爲這幾個對象創建一個共同的「類」呢？

　　構造函數

　　構造函數是另外一個編寫面向對象JavaScript代碼的方法，當你須要初始化對象的屬性、方法，或者須要建立多個屬性、方法各不相同的實例時，它將是你最佳的選擇。一樣咱們先從建立一個空對象開始：

unction 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 else語句是一個意思。

if (typeof title !== 'undefined') { 
this.title = title; 
} else { 
this.title = ""; 
} 
// Is the same as 
this.title = typeof title !== 'undefined' ? title : "";

 

若是title變量在對象被建立時傳入，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面向對象編程的入門，OO JS還有不少內容能夠講。