javascript物件導向的封裝簡單介紹

雖然是一門基於物件的語言，雖然基本可以說任何東西都是物件，但是它又不是c#或者java那樣典型的物件導向的語言，在當前的ES版本中，還沒有類（class）這個概念，當然後續的版本可能會新增。

下面就介紹一下在javascript中如何將屬性和方法封裝成一個物件，需要的朋友可以做一下參考。

一.建立物件最為原始的方式:

假定把網站看成一個物件，那麼它具有的基本屬性就是網站名稱和網址。

程式碼演示如下:

[JavaScript] 純文字檢視 複製程式碼
var Web = {
  webName : "",
  url : ""
}

下面就根據上面的物件結構建立兩個例項物件，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var antzone={};
antzone.webName="螞蟻部落";
antzone.url="softwhy.com";
var sina={};
sina.webName="新浪";
sina.url="sina.com";

上面建立了兩個網站的物件例項，非常的簡單，但是有個缺陷，就是兩個物件之間沒有任何的聯絡，如果要建立多個物件，那麼在程式碼量上將是一個麻煩，當然理解上非常的簡單。

二.對上面建立方式的改進:

下面我們建立一個函式，可以有效的減少程式碼量，提高效率。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
function Web(webName,url){
  return {
　  webName:webName,
　　url:url
  }
}

通過上面的函式，建立物件就可以簡單很多了，程式碼如此下:

[JavaScript] 純文字檢視 複製程式碼
var antzone=Web("螞蟻部落","softwhy.com");
var sina=Web("新浪","sina.com");

上面的方式雖然簡單了，但是兩個物件之間其實仍然沒有任何聯絡。

三.使用建構函式建立:

javascript中，建構函式就是一個普通函式，只是使用方式不同而已。

關於建構函式的更多內容可以參閱javascript建構函式簡單介一章節。

這個時候兩個物件已經產生某種內在的聯絡，比如constructor屬性都會指向建構函式Web。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
function Web(webName,url){
  this.webName=webName;
　this.url=url;
}
 
var antzone=new Web("螞蟻部落","softwhy.com");
var sina=new Web("新浪","sina.com");
console.log(antzone.constructor==Web);
console.log(sina.constructor==Web);

關於constructor屬性可以參閱javascript constructor一章節。

當然還有其他存在內在聯絡的屬性，這裡就不一一列舉了。

四.完善建構函式方式:

上面的建構函式方式還是存在著一定的問題，比如我們再網站新增幾個屬性的話，那麼程式碼就會變成如下:

[JavaScript] 純文字檢視 複製程式碼
function Web(webName,url){
  this.webName=webName;
　this.url=url;
  this.target="使用者訪問";
}

上面又增加了一個網站共同的屬性，每次建立例項物件，都會開闢一個空間來儲存這個共同的屬性，對於效率和記憶體都是一種消耗，那麼使用prototype原型就可以解決此問題，程式碼修改如下:

[JavaScript] 純文字檢視 複製程式碼
function Web(webName,url){
  this.webName=webName;
　this.url=url;
}
Web.prototype.target="使用者訪問";
 
var antzone=new Web("螞蟻部落","softwhy.com");
var sina=new Web("新浪","sina.com");
console.log(antzone.target);
console.log(sina.target);

關於prototype的更多內容可以參閱javascript prototype原型一章節。