Javascript之面向对象--封装

所属分类: 网络编程 / JavaScript 阅读数: 1266
收藏 0 赞 0 分享

第一步:做一个“手机的类"

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

 结果如下,全完正确:

以上就是本文的全部内容,希望对大家有所帮助,感兴趣的朋友可以看下《Javascript之面向对象--方法》谢谢对脚本之家的支持!

更多精彩内容其他人还在看

Canvas实现放射线动画效果

本文主要分享了Canvas实现放射线动画的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

微信小程序 image组件binderror使用例子与js中的onerror区别

这篇文章主要介绍了微信小程序 image组件binderror使用例子与js中的onerror区别的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

原生js轮播(仿慕课网)

本文主要分享了原生js实现仿慕课网的轮播效果。具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

Bootstrap table简单使用总结

这篇文章主要为大家总结了Bootstrap table的简单使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

微信小程序之MaterialDesign--input组件详解

本篇文章主要介绍了微信小程序之MaterialDesign--input组件详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
收藏 0 赞 0 分享

浅析javaScript中的浅拷贝和深拷贝

本篇文章主要介绍了浅析javaScript中的浅拷贝和深拷贝,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

js时间戳和c#时间戳互转方法(推荐)

下面小编就为大家带来一篇js时间戳和c#时间戳互转方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Bootstrap模态框使用详解

这篇文章主要为大家详细介绍了Bootstrap模态框的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Jil,高效的json序列化和反序列化库

下面小编就为大家带来一篇Jil,高效的json序列化和反序列化库。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

BootStrap实现带关闭按钮功能

这篇文章主要介绍了BootStrap实现带关闭按钮功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多