怎么迅速有效果掌握J(rèn)avaScript面向?qū)ο缶幊滔驅(qū)�圖文詳細(xì)教程

隨著像Node.js這類技術(shù)的發(fā)展，可以在服務(wù)器端使用JavaScript了。你也可以使用JavaScript來控制MongoDB的持續(xù)數(shù)據(jù)存儲。使用面向?qū)ο缶湍芎芎玫睦砬宕�碼，并方便理解和修改代碼。就請考慮使用面向?qū)ο蟮哪Ｊ健?/p>

作為一個開發(fā)者，是否寫出優(yōu)雅的代碼對于你的職業(yè)生涯至關(guān)重要。到處都是屬性、方法，代碼極其難懂，天哪，我的程序員，你究竟在做什么？仔細(xì)看看這篇指南，讓我們一起寫出優(yōu)雅的面向?qū)ο蟮腏avaScript代碼吧！

文本標(biāo)記

文本標(biāo)記只是JavaScript里創(chuàng)建對象的一種方法，當(dāng)然這里肯定不止這一種，但它是你在只打算創(chuàng)建一個對象實(shí)例時的首選方法。

1. var bill = {};

上面的代碼并不實(shí)用，它只是一個空對象。接下來我們動態(tài)地向這個對象中添加一些屬性和方法。

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

這里添加了屬性name，并且給它分配了值"Bill E Goat"。我們并不需要先創(chuàng)建一個空對象，而可以把所有代碼直接寫在一對括號里。

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"

如果屬性名不是一個合法的標(biāo)志符，我們還可以這樣訪問它：

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

注意：我在調(diào)用方法時在其后添加了圓括號�，F(xiàn)在，我們再重寫一下當(dāng)前的sound方法，并添加一個參數(shù)。

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

很好，我們已經(jīng)傳入?yún)��?shù)了，并且在方法定義中訪問了它。接下來，向?qū)ο笾性黾右粋�新方法來訪問name屬性。

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

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

1. bill.sayName; // function

怎么回事？訪問sayName方法返回了一個方法定義�，F(xiàn)在讓我們再深入些。

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

現(xiàn)在我們指定了sound方法為一個局部函數(shù)，可以調(diào)用這個函數(shù)并且傳遞參數(shù)。你認(rèn)為在復(fù)制bill的時候會發(fā)生什么？（類比下克隆羊Dolly）

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

上面的例子中我們新建了一個變量sally，并使它和bill相同，所以bill和sally會在內(nèi)存中引用了同一個對象。這時候給改變一塊它們就會同時發(fā)生改變。再看看下面這段代碼：

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是一個本地實(shí)例變量，只對bill可得。當(dāng)sayName方法被創(chuàng)建為全局變量時，當(dāng)它碰到this.name聲明時，它會在全局查找name的值。唯一的問題在于name還沒有被定義。現(xiàn)在讓我們在全局定義name，看看會發(fā)生什么：

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

這里我們在全局范圍內(nèi)定義了name變量，并且賦予了值"Bearded Octo"。當(dāng)我們在調(diào)用sayHello方法時它會在全局范圍內(nèi)查找name變量，最終會獲得值"Bearded Octo"。我們?yōu)槭裁床粸檫@幾個對象建立一個共同的“類”呢？

構(gòu)造函數(shù)

構(gòu)造函數(shù)是另一個編寫面向?qū)ο驤avaScript代碼的方法，當(dāng)你需要初始化對象的屬性、方法，或者需要創(chuàng)建多個屬性、方法各不相同的實(shí)例時，它將是你最佳的選擇。同樣我們先從創(chuàng)建一個空對象開始：

1. function Game() {};

這個對象包括自己的屬性，你甚至可以在創(chuàng)建對象時傳入屬性，然后再對其進(jìn)行修改。

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"

現(xiàn)在這個對象已經(jīng)有自己的方法了！新創(chuàng)建對象時我們甚至可以傳遞屬性，之后再修改。

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; // ""

也許你沒看明白第二行的內(nèi)容，其實(shí)是使用了三元操作來避免單行的if else，它和下面標(biāo)準(zhǔn)的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變量在對象被創(chuàng)建時傳入，title實(shí)例變量將會指定為title的值。如果沒有值傳入，那么title將會被初始化為默認(rèn)值""。我們同樣可以創(chuàng)建一個方法來訪問這個屬性：

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

還可以在Game類中添加一個方法，這樣所有Game類的實(shí)例將都能使用此方法。

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面向?qū)ο缶幊痰娜腴T，希望我的這個大家有所幫助，預(yù)祝大家快樂！有問題大家積極回帖討論下哈！