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构造函数的重载和工厂方法
Apr 07 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
js charAt的使用示例
Feb 18 Javascript
jquery实现的省市区三级联动
Apr 02 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
webpack打包js的方法
Mar 12 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
JavaScript实现雪花飘落效果
Dec 27 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根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
php常用表单验证类用法实例
2015/06/18 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
ext读取两种结构的xml的代码
2008/11/05 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
原生js调用json方法总结
2018/02/22 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
2019/05/09 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
学习python (1)
2006/10/31 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
盛大笔试题
2016/11/05 面试题
中华在我心中演讲稿
2014/09/13 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android