Javascript之面向對象--封裝

2019-11-19 18:42:08

字體：大中小

來源：轉載

供稿：網友

第一步:做一個“手機的類"

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

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

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

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

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,這個屬性.

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  }  }})()

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

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;})()

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

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

結果如下，全完正確：