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 中的类和闭包
Jan 08 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
Vue实现双向绑定的方法
Dec 22 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
Angular @HostBinding()和@HostListener()用法
Mar 05 Javascript
vue.js中created方法作用
Mar 30 Javascript
基于JavaScript实现轮播图效果
Jan 02 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安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
最佳JS代码编写的14条技巧
2011/01/09 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python实现比较两个列表(list)范围
2015/06/12 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
python2.7实现爬虫网页数据
2018/05/25 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
python实现宿舍管理系统
2019/11/22 Python
tensorflow 环境变量设置方式
2020/02/06 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
高一物理教学反思
2014/01/24 职场文书
教师专业自荐书范文
2014/02/10 职场文书
合理化建议书
2015/02/04 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
反邪教学习心得体会
2016/01/15 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
python异常中else的实例用法
2021/06/15 Python
Java界面编程实现界面跳转
2022/06/16 Java/Android