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 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 Javascript
JavaScript模板入门介绍
Sep 26 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
Jquery实现遮罩层的方法
Jun 08 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 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关联链接常用代码
2012/11/05 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
CI框架Session.php源码分析
2014/11/03 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
php代码架构的八点注意事项
2016/01/25 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
jquery实现图片裁剪思路及实现
2013/08/16 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
javascript中if和switch,==和===详解
2015/07/30 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Linux下编译安装MySQL-Python教程
2015/02/02 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
一个精品风格的世界:Atterley
2019/05/01 全球购物
临床医学专业毕业生的自我评价
2013/10/17 职场文书
商务考察邀请函范文
2014/01/21 职场文书
终止劳动合同协议书
2014/04/14 职场文书
三年级评语大全
2014/04/23 职场文书
学用政策心得体会
2014/09/10 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python