[JS]Javascript十三種設計模式之構造函數模式

在這一部分中,我們將探討一些經典的和現代的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

參考

To-[JS]Javascript十三種設計模式之模塊模式

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 工廠模式類似于現實生活中的工廠可以產生大量相似的商品,去做同樣的事情,實現同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,842評論 2 17
  • 單例模式 適用場景:可能會在場景中使用到對象,但只有一個實例,加載時并不主動創建,需要時才創建 最常見的單例模式,...
    Obeing閱讀 2,102評論 1 10
  • 面向對象編程 1.創建,使用函數 var CheckObject = {checkName : function(...
    依米花1993閱讀 402評論 0 0
  • 不管你跑到哪里,世界都是不公平的,我們既無法讓這個世界永遠公平,也找不到一個永遠公平的地方。 難怪比爾·蓋茨對青年...
    Molly_zhang閱讀 173評論 0 0
  • 現代人都注重身體健康,很多人都加入到各種各樣的運動中,健身中心也是人頭攢動,每個人都在汗流浹背的忙著,以為這樣就可...
    沈姐說說閱讀 578評論 3 3