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 UI的拖拽功能实现方法小结
Mar 14 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
vue实现扫码功能
Jan 17 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
PHP数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
JavaScript的instanceof运算符学习教程
2016/06/08 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
Three.js基础部分学习
2017/01/08 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
JS二分查找算法详解
2017/11/01 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
python日志logging模块使用方法分析
2019/05/23 Python
python自动点赞功能的实现思路
2020/02/26 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
荷兰网上药店:Drogisterij.net
2019/09/03 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
法学专业应届生求职信
2013/10/16 职场文书
经理任命书模板
2014/06/06 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技