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去掉字符串里的所有空格
Feb 08 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
微信小程序适配iphoneX的实现方法
Sep 18 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
vue实现节点增删改功能
Sep 26 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 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
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
Python2中的raw_input() 与 input()
2015/06/12 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
Python的缺点和劣势分析
2019/11/19 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
几道数据库的概念性面试题
2014/05/30 面试题
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
教育技术职业规划范文
2014/03/04 职场文书
授权委托书范本
2014/04/03 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
青春演讲稿范文
2014/05/08 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js