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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
在网页里看flash的trace数据的js类
Jan 10 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
如何获取select下拉框的值(option没有及有value属性)
Nov 08 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
基于js实现抽红包并分配代码实例
Sep 19 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 Vue.js
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/01/12 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
Node.js操作系统OS模块用法分析
2019/01/04 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
Python写的英文字符大小写转换代码示例
2015/03/06 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
基于Python爬虫采集天气网实时信息
2020/06/05 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
绿化工程实施方案
2014/03/17 职场文书
学生期末评语大全
2014/04/30 职场文书
硕士生找工作求职信
2014/07/05 职场文书
逃课检讨书范文
2015/05/06 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
摘录式读书笔记
2015/07/01 职场文书
运动会新闻报道稿
2015/07/22 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
德劲DE1108畅想
2021/04/22 无线电
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
关于python中模块和重载的问题
2021/11/02 Python