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 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
JS判定是否原生方法
Jul 22 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
javascript常用的方法整理
Aug 20 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
一个可复用的vue分页组件
May 15 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
小程序跳转H5页面的方法步骤
Mar 06 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
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
2014/01/28 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
javascript基础知识讲解
2017/01/11 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
Python简单的制作图片验证码实例
2017/05/31 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
python交互式图形编程实例(一)
2017/11/17 Python
Python2与python3中 for 循环语句基础与实例分析
2017/11/20 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
Java面试题:为什么要用Java
2012/05/11 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
实习自我评价怎么写
2013/12/02 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
员工离职通知函
2015/04/25 职场文书
大学军训通讯稿
2015/07/18 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python