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 相关文章推荐
jQuery 技巧小结
Apr 02 Javascript
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
JavaScript 异步调用
Oct 25 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
javascript测试题练习代码
2012/10/10 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
vuex 的简单使用
2018/03/22 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
AUC计算方法与Python实现代码
2020/02/28 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
公司转让协议书
2016/03/19 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
解决redis批量删除key值的问题
2022/03/23 Redis