javascript中类的定义方式详解(四种方式)


Posted in Javascript onDecember 22, 2015

本文实例讲述了javascript中类的定义方式。分享给大家供大家参考,具体如下:

类的定义包括四种方式:

1、工厂方式

function createCar(name,color,price){
  var tempcar=new Object;
  tempcar.name=name;
  tempcar.color=color;
  tempcar.price=price;
  tempcar.getName=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
  return tempcar;
}
var car1=new createCar("工厂桑塔纳","red","121313");
car1.getName();

定义了一个能创建并返回特定类型对象的工厂函数, 看起来还是不错的, 但有个小问题 ,

每次调用时都要创建新函数 showColor,我们可以把它移到函数外面,

function getName(){
  document.write(this.name+"-----"+this.color+"<br>");
}

在工厂函数中直接指向它

tempCar.getName = getName;

这样避免了重复创建函数的问题,但看起来不像对象的方法了。

2、构造函数方式

function Car(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.getColor=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
}
var car2=new Car("构造桑塔纳","red","121313");
car2.getColor();

可以看到与第一中方式的差别,在构造函数内部无创建对象,而是使用 this 关键字。

使用 new 调用构造函数时,先创建了一个对象,然后用 this 来访问。

这种用法于其他面向对象语言很相似了, 但这种方式和上一种有同一个问题, 就是重复创建函数。

3、原型方式

function proCar(){
}
proCar.prototype.name="原型";
proCar.prototype.color="blue";
proCar.prototype.price="10000";
proCar.prototype.getName=function(){
  document.write(this.name+"-----"+this.color+"<br>");
};
var car3=new proCar();
car3.getName();

首先定义了构造函数 Car,但无任何代码,然后通过 prototype 添加属性。优点:

a. 所有实例存放的都是指向 showColor 的指针,解决了重复创建函数的问题

b. 可以用 instanceof 检查对象类型

alert(car3 instanceof proCar);//true

缺点,添加下面的代码:

proCar.prototype.drivers = newArray("mike", "sue");
car3.drivers.push("matt");
alert(car3.drivers);//outputs "mike,sue,matt"
alert(car3.drivers);//outputs "mike,sue,matt"

drivers 是指向 Array 对象的指针,proCar 的两个实例都指向同一个数组。

4、动态原型方式

function autoProCar(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.drives=new Array("mike","sue");
  if(typeof autoProCar.initialized== "undefined"){
   autoProCar.prototype.getName =function(){
   document.write(this.name+"-----"+this.color+"<br>");
   };
   autoProCar.initialized=true;
  }
}
var car4=new autoProCar("动态原型","yellow","1234565");
car4.getName();
car4.drives.push("newOne");
document.write(car4.drives);

这种方式是我最喜欢的, 所有的类定义都在一个函数中完成, 看起来非常像其他语言的类定义,不会重复创建函数,还可以用 instanceof

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
jquery获取select选中值的方法分析
Dec 22 #Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 #Javascript
点评js异步加载的4种方式
Dec 22 #Javascript
JS模拟按钮点击功能的方法
Dec 22 #Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 #Javascript
js实现仿微博滚动显示信息的效果
Dec 21 #Javascript
Javascript实现Array和String互转换的方法
Dec 21 #Javascript
You might like
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
PHP中strncmp()函数比较两个字符串前2个字符是否相等的方法
2016/01/07 PHP
php fread读取文件注意事项
2016/09/24 PHP
CI框架表单验证实例详解
2016/11/21 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
vue多次循环操作示例
2019/02/08 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
flask开启多线程的具体方法
2020/08/02 Python
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
优秀老师事迹材料
2014/02/05 职场文书
《王二小》教学反思
2014/02/27 职场文书
实习生岗位职责
2014/04/12 职场文书
基层党员公开承诺书
2014/05/29 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
个人政治思想总结
2015/03/05 职场文书
运动会5000米加油稿
2015/07/21 职场文书
结婚幸福感言
2015/08/01 职场文书
2016年感恩节寄语
2015/12/07 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
八年级物理教学反思
2016/02/19 职场文书