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

 结果以下，全完正确：

以上就是本文的所有内容，但愿对你们有所帮助