JS物件導向基礎解說(工廠模式、建構函式模式、原型模式、混合模式、動態原型模式)_javascript技巧

什麼是物件導向？面向對像是一種思想！ （廢話）。

　　物件導向可以把程式中的關鍵模組都視為對象，而模組擁有屬性及方法。這樣我們如果把一些屬性及方法封裝起來，日後使用將非常方便，也可以避免繁瑣重複的工作。接下來將為大家講解在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.jb51.net/');

可以看到工廠模式的實作方法非常簡單，解決了創建多個相似物件的問題，但是工廠模式卻無從識別物件的類型，因為全部都是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.jb51.net/');
console.log(blog instanceof Blog);  // true， 判断blog是否是Blog的实例，即解决了工厂模式中不能

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

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

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

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

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

var blog = new Blog('scjb51', 'http://sc.jb51.net/'),
  blog2 = new Blog('jb51', 'http://www.jb51.net/');
blog.alertUrl();  // http://sc.jb51.net/
blog2.alertUrl();  // http://www.jb51.net/

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

　　原型模式

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

function Blog() {
}

Blog.prototype.name = 'wuyuchang';
Blog.prototype.url = 'http://tools.jb51.net/';
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://tools.jb51.net/fr1,fr2,fr3,fr4
blog2.alertInfo();  // wuyuchanghttp://tools.jb51.net/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://tools.jb51.net/', ['fr1', 'fr2', 'fr3']),
  blog2 = new Blog('wyc', 'http://**.com', ['a', 'b']);

blog.friend.pop();
blog.alertInfo();  // wuyuchanghttp://tools.jb51.net/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://tools.jb51.net'),
  blog2 = new Blog('wyc', 'http:***.com');

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

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