作家
登录

Javascript 面向对象(二)封装代码

作者: 来源:www.28hudong.com 2013-03-30 00:28:11 阅读 我要评论

写个小例子: 第一步:做一个“手机的类" 复制代码 代码如下: 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中break,continue和return语句用法小结

由于最近一直在看javascript,下面简要说一下它们三个在javascript的一些用法 break语句: break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句。由于它是用来退出循环或者switch语句,所以>>>详细阅读


本文标题:Javascript 面向对象(二)封装代码

地址:http://www.17bianji.com/kaifa2/JS/23371.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)