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 相关文章推荐
Exitjs获取DataView中图片文件名
Nov 26 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
vue中过滤器filter的讲解
Jan 21 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 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学习教程之第1天
2008/06/15 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
php分页查询的简单实现代码
2017/03/14 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
DOM 中的事件处理介绍
2012/01/18 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
详解vue-validator(vue验证器)
2017/01/16 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
python删除文件示例分享
2014/01/28 Python
Python装饰器基础详解
2016/03/09 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
Python实现常见的回文字符串算法
2018/11/14 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
python连接PostgreSQL过程解析
2020/02/09 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
绩效工资实施方案
2014/03/15 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
地球上的星星观后感
2015/06/02 职场文书
创业计划书之网吧
2019/10/10 职场文书