面向對象JS基礎講解，工廠模式、構造函數模式、原型模式、混合模式、動態原型模式

　　什么是面向對象？面向對象是一種思想！（廢話）。

　　面向對象可以把程序中的關鍵模塊都視為對象，而模塊擁有屬性及方法。這樣我們如果把一些屬性及方法封裝起來，日后使用將非常方便，也可以避免繁瑣重復的工作。接下來將為大家講解在JS中面向對象的實現。

 

　　工廠模式

　　工廠模式是軟件工程領域一種廣為人知的設計模式，而由於在ECMAScript中無法創建類，因此用函數封裝以特定接口創建對象。其實現方法非常簡單，也就是在函數內創建一個對象，給對象賦予屬性及方法再將對象返回即可。

function createBlog(name, url) {
    var o = new Object();
    o.name = name;
    o.url = url;
    o.sayUrl= function() {
        alert(this.url);
    }
    return o;
}

var blog1 = createBlog('wuyuchang', 'http://www.cnblogs.com/wuyuchang/');

 　　可以看到工廠模式的實現方法非常簡單，解決了創建多個相似對象的問題，但是工廠模式卻無從識別對象的類型，因為全部都是Object，不像Date、Array等，因此出現了構造函數模式。

　　

　　構造函數模式

　　ECMAScript中構造函數可以創建特定類型的對象，類似於Array、Date等原生JS的對象。其實現方法如下：

function Blog(name, url) {
    this.name = name;
    this.url = url;
    this.alertUrl = function() {
        alert(this.url);
    }
}

var blog = new Blog('wuyuchang', 'http://www.cnblogs.com/wuyuchang/');
console.log(blog instanceof Blog);    // true， 判斷blog是否是Blog的實例，即解決了工廠模式中不能

　　這個例子與工廠模式中除了函數名不同以外，細心的童鞋應該發現許多不同之處：

1. 函數名首寫字母為大寫　　（雖然標准沒有嚴格規定首寫字母為大寫，但按照慣例，構造函數的首寫字母用大寫
2. 沒有顯示的創建對象
3. 直接將屬性和方法賦值給了this對象
4. 沒有return語句
5. 使用new創建對象
6. 能夠識別對象（這正是構造函數模式勝於工廠模式的地方）
   

　　構造函數雖然好用，但也並非沒有缺點，使用構造函數的最大的問題在於每次創建實例的時候都要重新創建一次方法（理論上每次創建對象的時候對象的屬性均不同，而對象的方法是相同的），然而創建兩次完全相同的方法是沒有必要的，因此，我們可以將函數移到對象外面（也許有些童鞋已經看出缺點，噓！）。

function Blog(name, url) {
    this.name = name;
    this.url = url;
    this.alertUrl = alertUrl;
}

function alertUrl() {
    alert(this.url);
}

var blog = new Blog('wuyuchang', 'http://www.cnblogs.com/wuyuchang/'),
    blog2 = new Blog('cnblogs', 'http://www.cnblogs.com/');
blog.alertUrl();    // http://www.cnblogs.com/wuyuchang/
blog2.alertUrl();    // http://www.cnblogs.com/

 　　我們將alertUrl設置成全局函數，這樣一來blog與blog2訪問的都是同一個函數，可是問題又來了，在全局作用域中定義了一個實際只想讓Blog使用的函數，顯示讓全局作用域有些名副其實，更讓人無法接受的是在全局作用域中定義了許多僅供特定對象使用的方法，浪費空間不說，顯然失去了面向對象封裝性了，因此可以通過原型來解決此問題。

 

 　　原型模式

　　我們創建的每個函數都有prototype（原型）屬性，這個屬性是一個指針，指向一個對象，而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。使用原型對象的好處就是可以讓所有對象實例共享它所包含的屬性及方法。

function Blog() {
}

Blog.prototype.name = 'wuyuchang';
Blog.prototype.url = 'http://www.cnblogs.com/wuyuchang/';
Blog.prototype.friend = ['fr1', 'fr2', 'fr3', 'fr4'];
Blog.prototype.alertInfo = function() {
    alert(this.name + this.url + this.friend );
}

// 以下為測試代碼
var blog = new Blog(),
    blog2 = new Blog();
blog.alertInfo();    // wuyuchanghttp://www.cnblogs.com/wuyuchang/fr1,fr2,fr3,fr4
blog2.alertInfo();    // wuyuchanghttp://www.cnblogs.com/wuyuchang/fr1,fr2,fr3,fr4

blog.name = 'wyc1';
blog.url = 'http://***.com';
blog.friend.pop();
blog2.name = 'wyc2';
blog2.url = 'http://+++.com';
blog.alertInfo();    // wyc1http://***.comfr1,fr2,fr3
blog2.alertInfo();    // wyc2http://+++.comfr1,fr2,fr3

　　原型模式也不是沒有缺點，首先，它省略了構造函數傳遞初始化參數這一環節，結果所有實例在默認情況下都取得了相同的屬性值，這樣非常不方便，但這還是不是原型的最大問題，原型模式的最大問題在於共享的本性所導致的，由於共享，因此因此一個實例修改了引用，另一個也隨之更改了引用。因此我們通常不單獨使用原型，而是結合原型模式與構造函數模式。

 

　　混合模式（原型模式  + 構造函數模式）

function Blog(name, url, friend) {
    this.name = name;
    this.url = url;
    this.friend = friend;
}

Blog.prototype.alertInfo = function() {
    alert(this.name + this.url + this.friend);
}

var blog = new Blog('wuyuchang', 'http://www.cnblogs.com/wuyuchang/', ['fr1', 'fr2', 'fr3']),
    blog2 = new Blog('wyc', 'http://**.com', ['a', 'b']);

blog.friend.pop();
blog.alertInfo();    // wuyuchanghttp://www.cnblogs.com/wuyuchang/fr1,fr2
blog2.alertInfo();    // wychttp://**.coma,b

　　混合模式中構造函數模式用於定義實例屬性，而原型模式用於定義方法和共享屬性。每個實例都會有自己的一份實例屬性，但同時又共享着方法，最大限度的節省了內存。另外這種模式還支持傳遞初始參數。優點甚多。這種模式在ECMAScript中是使用最廣泛、認同度最高的一種創建自定義對象的方法。

 

　　動態原型模式

　　動態原型模式將所有信息封裝在了構造函數中，而通過構造函數中初始化原型（僅第一個對象實例化時初始化原型），這個可以通過判斷該方法是否有效而選擇是否需要初始化原型。

function Blog(name, url) {
    this.name = name;
    this.url = url;

    if (typeof this.alertInfo != 'function') {
        // 這段代碼只執行了一次
        alert('exe time');
        Blog.prototype.alertInfo = function() {
            alert(thia.name + this.url);
        }
    }
}

var blog = new Blog('wuyuchang', 'http://www.cnblogs.com/wuyuchang'),
    blog2 = new Blog('wyc', 'http:***.com');

　　可以看到上面的例子中只彈出一次窗，'exe time'，即當blog初始化時，這樣做blog2就不在需要初始化原型，對於使用這種模式創建對象，可以算是perfect了。

 

此博文參考《JavaScript高級程序設計》第3版，但語言都經過簡化，例子也重寫過，如果有什么不懂的地方請留言回復，作者將更新博客。