javascript --- 設計模式之構造函數模式

　　在JavaScript裏，構造函數一般是認爲用來實現實例的，JavaScript沒有類的概念，可是有特殊的構造函數。經過new關鍵字來調用定義的否早函數，你能夠告訴JavaScript你要建立一個新對象而且新對象的成員聲明都是構造函數裏定義的。在構造函數內部，this關鍵字引用的是新建立的對象。基本用法以下：

function her(name, sex, height){
     this.name = name;
     this.sex = sex;
     this.height = height;
     this.say = function(){
          return this.name + ' is a ' + this.sex + ' has ' + this.height;
     }
}
var she1 = new her('Anna', 'women', '170cm');
console.log(she1.say());  // 'Anna is a Women has 170cm'

　　上面的例子是個很是簡單的構造函數模式，可是有點小問題。首先是使用繼承很麻煩了，其次output()在每次建立對象的時候都從新定義了，最好的方法是讓全部Car類型的實例都共享這個output()方法，這樣若是有大批量的實例的話，就會節約不少內存(這種狀況在以前的文章裏提到過了，能夠看一下)。

解決這個問題，咱們可使用以下方式：

function her(name, sex, height){
     this.name = name;
     this.sex = sex;
     this.height = height;
     this.say = gaoHan;
}
function gaoHan(){
     return this.name + ' is a ' + this.sex + ' has ' + this.height;
}

 

這個方式雖然可用，可是咱們有以下更好的方式。

JavaScript裏函數有個原型屬性叫prototype，當調用構造函數建立對象的時候，全部該構造函數原型的屬性在新建立對象上均可用。按照這樣，多個her對象實例能夠共享同一個原型，咱們再擴展一下上例的代碼：

function her(name, sex, height){
     this.name = name;
     this.sex = sex;
     this.height = height;
}

/*
注意：這裏咱們使用了Object.prototype.方法名，而不是Object.prototype
主要是用來避免重寫定義原型prototype對象
*/
her.prototype.say = function(){
     return this.name + ' is a ' + this.sex + ' has ' + this.height;
}

var she1 = new her('Anna', 'women', '170cm');
console.log(she1.say());  // 'Anna is a Women has 170cm'

 

這裏，say()單實例能夠在全部Car對象實例裏共享使用。另外：咱們推薦構造函數以大寫字母開頭，以便區分普通的函數。

只能用new嗎？

function her(name, sex, height){
     this.name = name; this.sex = sex; this.height = height; this.say = function(){ return this.name + ' is a ' + this.sex + ' has ' + this.height; } }

//方法1：做爲函數調用 her('Anna', 'women', '170cm');

//添加到window對象上 console.log(window.say()); 

//方法2：在另一個對象的做用域內調用 var o = new Object(); her.call(o, "Anna", "women", "170cm"); console.log(o.say()); 

該代碼的方法1有點特殊，若是不適用new直接調用函數的話，this指向的是全局對象window，咱們來驗證一下：

// 做爲函數調用
var she = her('Anna', 'women', '170cm');
console.log(typeof tom); // 'undefined'
console.log(window.say());

這時候對象tom是undefined，而window.output()會正確輸出結果，而若是使用new關鍵字則沒有這個問題，驗證以下：

// 做爲函數調用
var she = her('Anna', 'women', '170cm');
console.log(typeof tom); // 'undefined'
console.log(tom.say());

強制使用new!

上述的例子展現了不使用new的問題，那麼咱們有沒有辦法讓構造函數強制使用new關鍵字呢，答案是確定的，上代碼：

function Her(name, sex, height){
    if( !(this instanceof her) ){
        return new Car(name, sexr, height);
    }
    this.name = name;
    this.year = year;
    this.height= height;
    this.say = function(){
         return this.name + ' is a ' + women + ' has ' + this.height;
    }
}
var she1 = new her('Anna', 'women', '170cm');
var she2 = her('Lous', 'women', '165cm');
console.log(typeof she1); // object;
console.log(typeof she2); // object;

 

經過判斷this的instanceof是否是Car來決定返回new Car仍是繼續執行代碼，若是使用的是new關鍵字，則(this instanceof Car)爲真，會繼續執行下面的參數賦值，若是沒有用new，(this instanceof Car)就爲假，就會從新new一個實例返回。

原始包裝函數：

// 使用原始包裝函數
var s = new String("my javascript");
var n = new Number(520);
var b = new Boolean(true);

// 推薦這種
var s = "my javascript";
var n = 520;
var b = true;

 推薦，只有在想保留數值狀態的時候使用這些包裝函數，關於區別能夠參考下面的代碼：

// 原始string
var greet = "Hello there";
// 使用split()方法分割
greet.split(' ')[0]; // "Hello"
// 給原始類型添加新屬性不會報錯
greet.smile = true;
// 單無法獲取這個值（18章ECMAScript實現裏咱們講了爲何）
console.log(typeof greet.smile); // "undefined"

// 原始string
var greet = new String("Hello there");
// 使用split()方法分割
greet.split(' ')[0]; // "Hello"
// 給包裝函數類型添加新屬性不會報錯
greet.smile = true;
// 能夠正常訪問新屬性
console.log(typeof greet.smile); // "boolean"

本章主要講解了構造函數模式的使用方法、調用方法以及new關鍵字的區別，但願你們在使用的時候有所注意。