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 编程引入命名空间的方法
Jun 29 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
JS+CSS实现3D切割轮播图
Mar 21 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
PHP如何透过ODBC来存取数据库
2006/10/09 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
Python实现改变与矩形橡胶的线条的颜色代码示例
2018/01/05 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
实时获取Python的print输出流方法
2019/01/07 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
公司营业员的自我评价
2014/03/04 职场文书
作文评语大全
2014/04/23 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
公司离职证明标准格式
2014/11/18 职场文书
董事会决议范本
2015/07/01 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
Python上下文管理器Content Manager
2021/06/26 Python
Redis 彻底禁用RDB持久化操作
2021/07/09 Redis