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 相关文章推荐
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
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
用libtemplate实现静态网页生成
2006/10/09 PHP
在IIS上安装PHP4.0正式版
2006/10/09 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
Python中给List添加元素的4种方法分享
2014/11/28 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
银行职员思想汇报
2013/12/31 职场文书
护士思想汇报
2014/01/12 职场文书
运动会通讯稿400字
2014/01/28 职场文书
公司委托书格式范文
2014/04/04 职场文书
环保小标语
2014/06/13 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书