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 相关文章推荐
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
详解JavaScript对象类型
Jun 16 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
js常用正则表达式集锦
May 17 Javascript
Layui 动态禁止select下拉的例子
Sep 03 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
Oct 27 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 中文处理函数集合
2008/08/27 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
JavaScript 详解预编译原理
2017/01/22 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
django创建自定义模板处理器的实例详解
2017/08/14 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
详解如何减少python内存的消耗
2019/08/09 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
Html5元素及基本语法详解
2016/08/02 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
初中体育教学反思
2014/01/14 职场文书
运动会100米解说词
2014/01/23 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
新春文艺演出主持词
2014/03/27 职场文书
公司会议策划方案
2014/05/17 职场文书
小学教育见习报告
2014/10/31 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
先进党支部申报材料
2014/12/24 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
计算机教师工作总结
2015/08/13 职场文书
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python