Javascript之面向对象--封装


Posted in Javascript onDecember 02, 2016

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

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之面向对象--封装

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

Javascript 相关文章推荐
这些年、我收集的JQuery代码小结
Aug 01 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
在Docker快速部署Node.js应用的详细步骤
Sep 02 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
vue 组件高级用法实例详解
Apr 11 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
JavaScript制作弹出层效果
Dec 02 #Javascript
Javascript之面向对象--方法
Dec 02 #Javascript
详解基于javascript实现的苹果系统底部菜单
Dec 02 #Javascript
Vue.js组件tree实现省市多级联动
Dec 02 #Javascript
Vue2实现组件props双向绑定
Dec 02 #Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 #Javascript
基于jQuery实现表格的排序
Dec 02 #Javascript
You might like
海贼王:最美的悬赏令!
2020/03/02 日漫
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
玩转图像函数库―常见图形操作
2006/09/03 PHP
php 用sock技术发送邮件的函数
2007/07/21 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
php创建sprite
2014/02/11 PHP
Yii配置文件用法详解
2014/12/04 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
Javascript 汉字字节判断
2009/08/01 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
prototype框架中美元符号$用法分析
2016/01/22 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
什么是python的自省
2020/06/21 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
网络安全方面的面试题
2016/01/07 面试题
大学生水文观测实习自我鉴定
2013/09/29 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
Python pyecharts绘制条形图详解
2022/04/02 Python