Javascript之面向對象--封裝

本篇文章經過具體實例，對Javascript的封裝過程進行案例分析，有助於對其代碼實現的理解與學習。下面就隨小編一塊兒來看看吧

第一步:作一個「手機的類"

?

1 2 3

var MobilePhone = (function(){ 　　　　………… })()

第二步：考慮這個類，裏須要那些類的私有屬性，這裏我想定義的是實例出來手機的數量

?

1 2 3 4

var MobilePhone = (function(){  //私有屬性  var count = 0; //表明手機的數量 })()

第三步：建立一個構造函數，即實例時候，對產生的新象的一個初始化，例如屬性，方法的初始化;在這個例子中，每個手機都會有顏色，大小，價格屬性.這裏的構造函數也是一個閉包，因此能夠訪問count，而且count的值會長期保存在內存中（只要有引用存在）

?

1 2 3 4 5 6 7 8 9 10 11 12

var MobilePhone = (function(){  //私有屬性  var count = 0; //表明手機的數量　  　　　　//構造函數  　　　　var creatphone = function(color,size,price){  　　　　　　　　count++;  　　　　　　　　this._color = color; //手機的顏色  　　　　　　　　this._size = size; //手機的大小  　　　　　　　　this._price = price; //手機的價格  　　　　　　　　this.index = count; //手機索引，是第幾臺建立的手機手象  　　　　　} })()

第四步：共有方法：

即全部實例出來的手機對象，都能使用的方法，這裏手機應該能夠改變價格，顏色，大小，也能夠顯示大小，顏色，價格。

這裏的共有方法應該放在「原型對象」中：

1.全部經過該構造函數實例的對象，也就是造出的手機，都能使用「原型對象」中的方法。

2.若是放在構造函數中，那麼每一次實例一個手機對象出來，都會產生一堆重複的方法，佔用內存。

3."constructor":creatphone解釋：

由於creatphone.prototype ={……}至關對把以前的原型對象的引用，給覆蓋掉了。而爲了讓原型對象和該構造函數關聯起來 設置了"constructor":creatphone,這個屬性.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

var MobilePhone = (function(){  //私有屬性  var count = 0;//表明手機的數量 　　　　//構造函數 　　　　 var creatphone = function(color,size,price){ 　　　　　　　　count++; 　　　　　　　　this._color = color; //手機的顏色 　　　　　　　　this._size = size; //手機的大小 　　　　　　　　this._price = price; //手機的價格 　　　　　　　　this.index = count; //手機索引，是第幾臺建立的手機手象 　 　　　　}  //公有方法，存放在原型對象中  creatphone.prototype = { 　　　　　　"constructor":creatphone, 　　　　　　//獲取手機顏色   "getColor" : function(){   return this._color;   }, 　　　　　　//設置手機顏色   "setColor" : function(color){   this._color = color;   }, 　　　　　　//獲取手機大小   "getSize" : function(){   return "width:"+this._size.width + " height:" + this._size.height;   }, 　　　　　　//設置手機大小   "setSize" : function(size){   this._size.width = size.width;   this._size.height = size.height;   }, 　　　　　　//獲取手機價格   "getPrice" : function(){   return this._price;   }, 　　　　　　//設置手機價格   "setPrice" : function(price){   this._price = price   }  } })()

第五步：特權方法，即須要有一個方法，可以去訪問類的私有變量。就是實例出來多少臺手機對象

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

var MobilePhone = (function(){  //私有屬性  var count = 0;//表明手機的數量  var index = 0;//表明手機的索引  　　　　//構造函數  　　　　var creatphone = function(color,size,price){  　　　　　　　　count++;  　　　　　　　　this._color = color; //手機的顏色  　　　　　　　　this._size = size; //手機的大小  　　　　　　　　this._price = price; //手機的價格  　　　　　　　　this.index = count; //手機索引，是第幾臺建立的手機手象  　　　　　　} 　　　　　//公有方法，存放在原型對象中  creatphone.prototype = {   "constructor":creatphone,   "getColor" : function(){   return this._color;   },   "setColor" : function(color){   this._color = color;   },   "getSize" : function(){   return "width:"+this._size.width + " height:" + this._size.height;   },   "setSize" : function(size){   this._size.width = size.width;   this._size.height = size.height;   },   "getPrice" : function(){   return this._price;   },   "setPrice" : function(price){   this._price = price   }  }  //特權方法  creatphone.get_count_index = function(){   return count  }  return creatphone; })()

用上面封裝的一個手機類 測試

?

1 2 3 4 5 6 7 8

var anycall = new MobilePhone(); //實例一個三星手機對象 var HTC = new MobilePhone(); //實例一個HTC手機對象 var Iphone4s = new MobilePhone(); //實例一個蘋果4S手機對象 console.log("三星是第："+anycall.index+"臺"); //FF的控制檯輸出三星手機對象是第幾臺建立的，即索引； console.log("HTC是第："+HTC.index+"臺"); //FF的控制檯輸出HTC手機對象是第幾臺建立的，即索引； console.log("Iphone4s是第："+Iphone4s.index+"臺");  //FF的控制檯輸出個蘋果4S手機對象是第幾臺建立的，即索引； console.log("總共造出了"+MobilePhone.get_count_index()+"手機"); //FF的控制檯輸出總共建立了幾臺手機； console.log(anycall.constructor === MobilePhone); //實例出來的對象，的原形象中的constructor，是否還指向MobilePhone

 結果以下，全完正確：

以上就是本文的所有內容，但願對你們有所幫助