在這一部分中,我們將探討一些經典的和現代的JavaScript實現設計模式。
開發人員通常想知道他們的工作流程中是否應該使用一個理想的模式或模式集.。這個問題沒有一個真正的單一的答案,我們工作的每一個腳本和Web應用程序都可能有自己的需求,我們需要考慮一下,我們覺得一個模式可以為實現提供真正的價值.。
例如,一些項目可能受益于由觀察員模式(這減少了如何依賴部分的應用程序彼此),而另一些可能只是太小去耦是一個關注所有的去耦好處。
也就是說,一旦我們牢牢掌握了設計模式和他們最適合的具體問題,就很容易將它們集成到我們的應用架構中。
我們將在本節探討的模式是:
創建對象
// 第一種方式
var newObject = {};
// 第二種方式
var newObject = Object.create(Object.prototype);
// 第三種方式
var newObject = new Object();
在最后一個示例中的“對象”構造函數為特定值創建一個對象包裝,如果沒有值傳遞時,它將創建一個空對象。
對象賦值
兼容 ECMAScript3的方法
- 第一種方式 (點語法)
// 設置屬性
newObject.someKey = "Hello World";
// 獲取屬性
var value = newObject.someKey;
- 第二種方式 (括號語法)
// 設置屬性
newObject["someKey"] = "Hello World";
// 獲取屬性
var value = newObject["someKey"];
只適用于ECMAScript5的方法
- 第三種方式
// 設置屬性
Object.defineProperty(newObject,"someKey",{
value:"for more control of the property's behavior",
writable:true,
enumerable:true,
configurable:true
});
如果上述寫法比較難以閱讀的話,可以使用簡單寫法
var defineProp = function (obj,key,value) {
var config = {
value:value,
writable:true,
enumerable:true,
configurable:true
};
Object.defineProperty(obj,key,config);};
用法: 創建一個person實例
var person = Object.create(Object.prototype);
// 設置實例的屬性
defineProp(person,"name","xiaohao");
defineProp(person,"dateOfBirth","1989");
console.log(person);
Outputs: { name: 'xiaohao', dateOfBirth: '1989' }
- 第四種方式
//設置屬性
Object.defineProperties(newObject, {
"someKey":{
value:"Hello World",
writable:true
},
"anotherKey":{
value:"Xiao Hao",
writable:false
}
});
第三種和第四種方式中獲取屬性的方式,可以參考第一種和第二種方式.
** 就像我們在以后會看到的,下面的這些方法可以用來實現繼承**
// 創建一個driver實例繼承于person對象
var driver = Object.create(person);
// 設置driver的新屬性
defineProp(driver,"height","183.0cm");
// 獲取從person繼承過來的person屬性
console.log(driver.dateOfBirth);
// 獲取剛剛新設置的屬性
console.log(driver.height);
基本構造函數(Basic Constructors)
正如我們前面看到的,JavaScript不支持Class類的概念,但它支持使用特殊的構造函數來創建實例對象。 通過簡單的前綴關鍵字"new"調用一個構造器函數,我們可以告訴JavaScript我們想要的功能就像一個構造函數實例化一個新的對象并且函數定義的成員。 在構造函數中,使用新對象的關鍵字是"this"。
- 一個基本的構造函數:
function Car(model,year,miles) {
this.model = model;
this.year = year;
this.miles = miles;
this.toString = function () {
return this.model + " has done " + this.miles + " miles";
};
}
// 創建實例對象
var civic = new Car("Honda Civic",2009,20000);
var mondeo = new Car("Ford Mondeo",2010,5000);
console.log(civic.toString());
//Outputs: Honda Civic has done 20000 miles
console.log(mondeo.toString());
//Outputs: Ford Mondeo has done 5000 miles
- 使用Prototype(原型)創建構造函數
function Car( model, year, miles ) {
this.model = model;
this.year = year;
this.miles = miles;
}
//注意這里的用法,我們使用的是Object.prototype.newMethod而不是Object.prototype
//這樣是為了避免重新定義prototype對象
Car.prototype.toString = function () {
return this.model + " has done " + this.miles + " miles";
};
//創建實例對象
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
console.log( civic.toString() );
//Outputs: Honda Civic has done 20000 miles
console.log( mondeo.toString() );
//Outputs: Ford Mondeo has done 5000 miles