javascript創建物件的幾個常用模式介紹

本文介紹了javascript中創建物件常用的幾種模式，包括：工廠模式，建構函數模式，原型模式，組合建構函式與原型的模式，動態原型模式。

一.工廠模式

看如下程式碼：

function getMySon(name,sex){
    var o={};
    o.name=name;
    o.sex=sex;
    o.sayName = function(){
        alert(this.name);
    }    return o;
}
son1 = getMySon('li ming','male');
son2 = getMySon('li hong','female');

這就是工廠模式。在函數中定義一個對象，並為其新增屬性與方法，最後將這個物件返回。雖然這種模式實現了方便的創建對象，但是有這樣一個問題，即不能判斷這個實例到底是誰創建的。
例如 son1 intanceof getMySon並不能回傳 true。因為這裡的實例確切來說不是由getMySon 透過new來創建的，而是getMySon中的 o。
所以工廠模式並不適合需要創建很多種物件的情況。

那麼怎麼創建物件才能正確的判斷實例是從哪裡來的呢？下面就要說到建構函式模式了。

二.建構函式模式

看如下程式碼 :

function getMySon(name,sex){
    this.name = name;    
    this.sex = sex;    
    this.sayName = function(){
        alert(this.name);
    }
}

son1 = new getMySon('li ming','female');

這就是建構函式模式，注意在呼叫時要用 new。

在進行new呼叫時，進行以下步驟：

            1. 创建一个新的对象（并把空对象的__proto__属性设置为getMySon.prototype)。

            2.将构造函数的作用域赋给新对象（此时this 指向了这个新对象）。

            3.执行构造函数中的代码（通过this 为这个新对象添加属性）

            4.返回新对象。

透過這種方式產生的實例可以使用son1 instanceof getMySon來判斷實例是由誰來產生的。

那麼使用建構子有什麼問題呢？由於每次使用new時都會建立一個新的對象，那麼所有的資料在不同實例之間都是不共享的。但是對於函數sayName來說，它並沒有必要創建多個。這樣做浪費了空間。

這樣就引出了下一種，原型模式。

三.原型模式

看如下程式碼：

function getMySon(){}
getMySon.prototype.name = 'li ming';
getMySon.prototype.sex = 'female';
getMySon.prototype.sayName = function(){
    alert(this.name);
}

這就是原型模式（原型的相關知識這裡不詳細說）。

原型模式將屬性和方法加入了getMySon.prototype裡，prototype由所有的實例共享，它只有一份，並不是所有的實例各有一份。

這種方式實現了讓函數只有一份，不必佔用多餘的空間。但是，name，sex之類的屬性並不需要在所有實例間共享，而且使用原型模式進行傳參產生這些屬性也不方便。

那麼可以合併建構函式模式與原型模式，利用它們各自的優點。讓各實例間不需要進行共享且需要透過傳參進行生成的屬性放在建構子模式中生成，讓各實例中需要共享的（例如方法）在原型模式中生成。

三. 組合建構子與原型的模式
看如下程式碼：

function getMySon(name,sex){
    this.name=name;    
    this.sex=sex;
}
getMySon.prototype.sayName(){
    alert(this.name);
}
son1=new getMySon('li ming','female');

這是 組合建構子與原型的模式 。這種方式結合了建構函數模式與原型模式的優點。這是最常用的一種創建物件的模式。

四. 動態原型模式

所謂動態原型模式，其實是對 組合建構函式與原型的模式 的一種封裝。
看如下程式碼：

function getMySon(name,sex){
    this.name = name;    
    this.sex = sex;    //即使有多个需要定义的方法，也只需判断一个方法。
    if(typeof sayName != 'function'){ 
        getMySon.prototype.sayName=function(){
            alert(this.name);
        }
    }
}
son1=new getMySon('li ming','female');

這裡之所以命名為動態原型模式，是因為getMySon在不同的呼叫中會發生變化，是動態的。只有在第一次呼叫getMySon時才會執行對sayName函數的定義。
從本質來看，仍然是將不需共享的透過建構函式進行定義，需要共享的方法透過原型進行定義。只是將它們放在了一起，進行了封裝。

#

以上是javascript創建物件的幾個常用模式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！