javascript物件導向封裝簡單介紹

作為一個門物件導向的語言，封裝自然是一大特點之一，下面就簡單介紹一下javascript的物件封裝。

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

使用物件直接建立一個物件，例如:

[JavaScript] 純文字檢視 複製程式碼
var web={
  webName:"螞蟻部落",
  webAddress:"青島市南區"
}

這個方式建立物件自然簡單，當然如果要建立多個類似的物件的時候，就不是太方便了。

二.對上面的方式進行改進:

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

以上的方式就更為便利了，例如我們建立以下兩個物件:

[JavaScript] 純文字檢視 複製程式碼
var firstWeb=web("螞蟻部落","青島市南區");
var secondWeb=web("網易","北京");

上面的例子比較簡單，這樣也不能夠反映出兩個例項之間的聯絡。

三.使用建構函式:

所謂的建構函式就是普通的函式，如果使用new運算子進行呼叫，那麼它就是被用作建構函式，並且this會指向由建構函式所建立的物件例項，上面的程式碼可以改造成下面的形式:

[JavaScript] 純文字檢視 複製程式碼
function web(webName,webAddress){
  this.webName=webName;
  this.webAddress=webAddress;
}

那麼建立物件例項就可以用下面的方法:

[JavaScript] 純文字檢視 複製程式碼
var webObj=new web("螞蟻部落","青島市南區");
webObj.webName//螞蟻部落
webObj.webAddress//青島市南區

webObj會含有一個constructor屬性指向建構函式web:

[JavaScript] 純文字檢視 複製程式碼
webObj.constructor==web//true

四.使用原型prototype:

使用建構函式方式還是有很大的問題的，如果web物件中有固定不變的屬性或者方法，那麼每使用建構函式建立一個物件例項，都會將固定不變的屬性或者方法複製一份，那麼這就造成了記憶體空間的浪費，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function web(webName,webAddress){
  this.webName=webName;
  this.webAddress=webAddress;
  this.style="學習網站";
}
var firstWeb=new web("螞蟻部落","青島市南區");
var secondWeb=new web("dz","北京");

上面的程式碼中，style屬性是固定的，每建立一次物件例項，都會複製一份，這樣就多佔用了記憶體空間。

下面就用物件原型來解決此問題，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
function web(webName,webAddress){
  this.webName=webName;
  this.webAddress=webAddress;
}
web.prototype.style="學習網站";
var firstWeb=new web("螞蟻部落","青島市南區");
var secondWeb=new web("dz","北京");
firstWeb.style//學習網站
secondWeb.style//學習網站

以上程式碼中，兩個例項都能夠獲取style屬性值，不過建立物件例項的時候，並沒有開闢新的記憶體地址儲存此屬性的內容，而是使用一個指標指向web的原型物件。