快捷導(dǎo)航

Javascript之面向?qū)ο?-封裝

更新時(shí)間：2016年12月02日 13:41:05 作者：船長(zhǎng)op

本篇文章通過具體實(shí)例，對(duì)Javascript的封裝過程進(jìn)行案例分析，有助于對(duì)其代碼實(shí)現(xiàn)的理解與學(xué)習(xí)。下面就隨小編一起來看看吧

第一步:做一個(gè)“手機(jī)的類"

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

第二步：考慮這個(gè)類，里需要那些類的私有屬性，這里我想定義的是實(shí)例出來手機(jī)的數(shù)量

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

第三步：創(chuàng)建一個(gè)構(gòu)造函數(shù)，即實(shí)例時(shí)候，對(duì)產(chǎn)生的新象的一個(gè)初始化，例如屬性，方法的初始化;在這個(gè)例子中，每一個(gè)手機(jī)都會(huì)有顏色，大小，價(jià)格屬性.這里的構(gòu)造函數(shù)也是一個(gè)閉包，所以可以訪問count，并且count的值會(huì)長(zhǎng)期保存在內(nèi)存中（只要有引用存在）

var MobilePhone = (function(){
 //私有屬性
 var count = 0; //代表手機(jī)的數(shù)量　
 　　　　//構(gòu)造函數(shù)
 　　　　var creatphone = function(color,size,price){
 　　　　　　　　count++;
 　　　　　　　　this._color = color; //手機(jī)的顏色
 　　　　　　　　this._size = size; //手機(jī)的大小
 　　　　　　　　this._price = price; //手機(jī)的價(jià)格
 　　　　　　　　this.index = count; //手機(jī)索引，是第幾臺(tái)創(chuàng)建的手機(jī)手象
 　　　　　}
})()

第四步：共有方法：

即所有實(shí)例出來的手機(jī)對(duì)象，都能使用的方法，這里手機(jī)應(yīng)該可以改變價(jià)格，顏色，大小，也可以顯示大小，顏色，價(jià)格。

這里的共有方法應(yīng)該放在“原型對(duì)象”中：

1.所有通過該構(gòu)造函數(shù)實(shí)例的對(duì)象，也就是造出的手機(jī)，都能使用“原型對(duì)象”中的方法。

2.如果放在構(gòu)造函數(shù)中，那么每一次實(shí)例一個(gè)手機(jī)對(duì)象出來，都會(huì)產(chǎn)生一堆重復(fù)的方法，占用內(nèi)存。

3."constructor":creatphone解釋：

因?yàn)閏reatphone.prototype ={……}相當(dāng)對(duì)把之前的原型對(duì)象的引用，給復(fù)蓋掉了。而為了讓原型對(duì)象和該構(gòu)造函數(shù)關(guān)聯(lián)起來設(shè)置了"constructor":creatphone,這個(gè)屬性.

var MobilePhone = (function(){
 //私有屬性
 var count = 0;//代表手機(jī)的數(shù)量
　　　　//構(gòu)造函數(shù)
　　　　 var creatphone = function(color,size,price){
　　　　　　　　count++;
　　　　　　　　this._color = color; //手機(jī)的顏色
　　　　　　　　this._size = size; //手機(jī)的大小
　　　　　　　　this._price = price; //手機(jī)的價(jià)格
　　　　　　　　this.index = count; //手機(jī)索引，是第幾臺(tái)創(chuàng)建的手機(jī)手象
　 　　　　}
 //公有方法，存放在原型對(duì)象中 
 creatphone.prototype = { 
　　　　　　"constructor":creatphone,
　　　　　　//獲取手機(jī)顏色
  "getColor" : function(){
  return this._color; 
  },
　　　　　　//設(shè)置手機(jī)顏色
  "setColor" : function(color){
  this._color = color;
  },
　　　　　　//獲取手機(jī)大小
  "getSize" : function(){
  return "width:"+this._size.width + " height:" + this._size.height; 
  },
　　　　　　//設(shè)置手機(jī)大小
  "setSize" : function(size){
  this._size.width = size.width;
  this._size.height = size.height;
  },
　　　　　　//獲取手機(jī)價(jià)格
  "getPrice" : function(){
  return this._price;
  },
　　　　　　//設(shè)置手機(jī)價(jià)格
  "setPrice" : function(price){
  this._price = price
  } 
 }
})()

第五步：特權(quán)方法，即需要有一個(gè)方法，能夠去訪問類的私有變量。就是實(shí)例出來多少臺(tái)手機(jī)對(duì)象

var MobilePhone = (function(){
 //私有屬性
 var count = 0;//代表手機(jī)的數(shù)量
 var index = 0;//代表手機(jī)的索引
 　　　　//構(gòu)造函數(shù)
 　　　　var creatphone = function(color,size,price){
 　　　　　　　　count++;
 　　　　　　　　this._color = color; //手機(jī)的顏色
 　　　　　　　　this._size = size; //手機(jī)的大小
 　　　　　　　　this._price = price; //手機(jī)的價(jià)格
 　　　　　　　　this.index = count; //手機(jī)索引，是第幾臺(tái)創(chuàng)建的手機(jī)手象
 　　　　　　}
　　　　　//公有方法，存放在原型對(duì)象中
 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
  } 
 }
 //特權(quán)方法
 creatphone.get_count_index = function(){
  return count
 }
 return creatphone;
})()

用上面封裝的一個(gè)手機(jī)類測(cè)試

var anycall = new MobilePhone(); //實(shí)例一個(gè)三星手機(jī)對(duì)象
var HTC = new MobilePhone(); //實(shí)例一個(gè)HTC手機(jī)對(duì)象
var Iphone4s = new MobilePhone(); //實(shí)例一個(gè)蘋果4S手機(jī)對(duì)象
console.log("三星是第："+anycall.index+"臺(tái)"); //FF的控制臺(tái)輸出三星手機(jī)對(duì)象是第幾臺(tái)創(chuàng)建的，即索引；
console.log("HTC是第："+HTC.index+"臺(tái)"); //FF的控制臺(tái)輸出HTC手機(jī)對(duì)象是第幾臺(tái)創(chuàng)建的，即索引；
console.log("Iphone4s是第："+Iphone4s.index+"臺(tái)");  //FF的控制臺(tái)輸出個(gè)蘋果4S手機(jī)對(duì)象是第幾臺(tái)創(chuàng)建的，即索引；
console.log("總共造出了"+MobilePhone.get_count_index()+"手機(jī)"); //FF的控制臺(tái)輸出總共創(chuàng)建了幾臺(tái)手機(jī)；
console.log(anycall.constructor === MobilePhone); //實(shí)例出來的對(duì)象，的原形象中的constructor，是否還指向MobilePhone

結(jié)果如下，全完正確：