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 25 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
使用js画图之圆、弧、扇形
Jan 12 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
从零开始最小实现react服务器渲染详解
Jan 26 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php Calender(日历)代码分享
2014/01/03 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
php数组添加元素方法小结
2014/12/20 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
JS的反射问题
2010/04/07 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
微信小程序tabBar 返回tabBar不刷新页面
2019/07/25 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
python编写猜数字小游戏
2019/10/06 Python
python 实现多线程下载视频的代码
2019/11/15 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
教育学专业毕业生的自我评价
2013/11/21 职场文书
公司董事长岗位职责
2014/06/08 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
python获取淘宝服务器时间的代码示例
2021/04/22 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript