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 相关文章推荐
js数组操作常用方法
May 08 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
基于vue 实现token验证的实例代码
Dec 14 Javascript
layDate插件设置开始和结束时间
Nov 15 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 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获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
php动态函数调用方法
2015/05/21 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
input框中的name和id的区别
2016/11/16 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
化妆师职业生涯规划书
2014/02/16 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
同学聚会开幕词
2019/04/02 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers