譯文正文:
到處都是屬性、方法,代碼極其難懂,天哪,我的程序員,妳究竟在做什麽?仔細看看這篇指南,讓我們壹起寫出優雅的面向對象的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!' );
}
};
是不是很美觀?訪問它的屬性和方法就像呼吸壹樣簡單、自然。
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的名字了?