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下给元素添加事件的方法与代码
Aug 13 Javascript
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
jquery动态添加option示例
Dec 30 Javascript
angularJS 入门基础
Feb 09 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
js实现拾色器插件(ColorPicker)
May 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
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
es6数值的扩展方法
2019/03/11 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python编程中装饰器的使用示例解析
2016/06/20 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python 批量修改/替换数据的实例
2018/07/25 Python
python实现n个数中选出m个数的方法
2018/11/13 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
python如何读取bin文件并下发串口
2019/07/05 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
致共产党员倡议书
2014/04/16 职场文书
融资租赁计划书
2014/04/29 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
财务工作失职检讨书
2014/11/21 职场文书
出国留学自荐信模板
2015/03/06 职场文书
同意报考公务员证明
2015/06/17 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书