JavaScript高级程序设计 阅读笔记(十三) js定义类或对象


Posted in Javascript onAugust 14, 2012

工厂方式

创建并返回特定类型的对象。

function createCar(sColor,iDoors,iMpg){ 
var oTempCar=new Object(); 
oTempCar.color=sColor; 
oTempCar.doors=iDoors; 
oTempCar.mpg=iMpg; 
oTempCar.showColor=function(){ 
alert(this.color); 
} 
return oTempCar; 
}

调用示例:

var oCar1=createCar("red",4,23); 
var oCar2=createCar("blue",3,25); 
oCar1.showColor(); 
oCar2.showColor();

缺点:方法重复创建了。如在上面的调用示例中,oCar1和oCar2均有自己的shoColor方法,但这个是可以共用的。

构造函数方式

示例:

function Car(sColor,iDoors,iMpg){ 
this.color=sColor; 
this.door=iDoors; 
this.mpg=iMpg; 
this.showColor=function(){ 
alert(this.color); 
} 
}

调用示例:

var oCar1=new Car("red",4,23); 
var oCar2=new Car("blue",3,25);

缺点:跟工厂方式一样,方法重复创建了。

原型方式

本方式利用了对象的 prototype 属性,可把它看成创建新对象所依赖的原型。这里用空构造函数来设置类名,然后所有的属性和方法都被直接赋予 prototype 属性,重写前面的例子,代码如下:

function Car(){ 
} Car.prototype.color="red"; 
Car.prototype.doors=4; 
Car.prototype.mpg=23; 
Car.prototype.showColor=function(){ 
alert(this.color); 
}

调用:

var oCar1=new Car(); 
var oCar2=new Car();

缺点:不能通过给构造函数传递参数初始化属性的值

混合的构造函数/原型方式

联合使用构造函数和原型方式,示例如下:

function Car(sColor,iDoors,iMpg){ 
this.color=sColor; 
this.door=iDoors; 
this.mpg=iMpg; 
} Car.prototype.showColor=function(){ 
alert(this.color); 
}

调用示例:

var oCar1=new Car("red",4,23); 
var oCar2=new Car("blue",3,25);

优点:无内存浪费,创建方便。

这种方式是ECMAScript采用的主要方式。

动态原型方法

使用混合的构造函数/原型方式把对象的方法放在了对象外面定义,让人感觉不是那么面向对象,没有在视觉上进行很好的封装,因此产生了动态原型方法:

function Car(sColor,iDoors,iMpg){ 
this.color=sColor; 
this.door=iDoors; 
this.mpg=iMpg; 
if(typeof Car._initialized=="undefined"){ 
Car.prototype.showColor=function(){ 
alert(this.color); 
}; 
Car._initialized=true; 
} 
}

作者:Artwl
出处:http://artwl.cnblogs.com
Javascript 相关文章推荐
JavaScript面向对象编程
Mar 02 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 #Javascript
jQuery 1.8 Release版本发布了
Aug 14 #Javascript
常用一些Javascript判断函数
Aug 14 #Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
Aug 14 #Javascript
JavaScript 布尔操作符解析  && || !
Aug 10 #Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 #Javascript
JavaScript之引用类型介绍
Aug 10 #Javascript
You might like
投票管理程序
2006/10/09 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
php-fpm服务启动脚本的方法
2018/04/27 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
javascript实现拖放效果
2015/12/16 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
高中毕业自我鉴定
2013/12/22 职场文书
办公室文员工作职责
2014/01/31 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
党员目标管理责任书
2014/07/25 职场文书
就业意向书
2014/07/29 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
2014年学校工会工作总结
2014/12/06 职场文书