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身份证判断方法支持15位和18位
Mar 18 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
Javascript里使用Dom操作Xml
2007/01/22 Javascript
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
Python的垃圾回收机制深入分析
2014/07/16 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
对python中dict和json的区别详解
2018/12/18 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
如何理解Python中的变量
2020/06/01 Python
python中wheel的用法整理
2020/06/15 Python
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
大学应届毕业生个人求职信
2013/09/23 职场文书
董事长秘书岗位职责
2013/11/29 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
开会迟到检讨书
2014/01/08 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
旅游市场营销方案
2014/03/09 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
试用期辞职信范文
2015/03/02 职场文书
导游词之韩国济州岛
2019/10/28 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技
springboot 全局异常处理和统一响应对象的处理方式
2022/06/28 Java/Android