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 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
纯javascript代码实现计算器功能(三种方法)
Sep 07 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
使用FormData实现上传多个文件
Dec 04 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 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
php批量更改数据库表前缀实现方法
2013/10/26 PHP
php中{}大括号是什么意思
2013/12/01 PHP
php编程每天必学之表单验证
2016/03/01 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
JS定时关闭窗口的实例
2013/05/22 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
js分页之前端代码实现和请求处理
2017/08/04 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
JS中call和apply函数用法实例分析
2018/06/20 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
解决PyCharm中光标变粗的问题
2017/08/05 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
python中二分查找法的实现方法
2020/12/06 Python
学校食堂采购员岗位职责
2013/12/05 职场文书
简历的自荐信
2013/12/19 职场文书
求职自荐信怎么写
2014/03/06 职场文书
党支部对照检查材料
2014/08/25 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python
python 爬取天气网卫星图片
2021/06/07 Python
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
MySQL分布式恢复进阶
2022/07/23 MySQL
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技