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 相关文章推荐
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
微信小程序实现圆形进度条动画
Nov 18 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
Vue的Options用法说明
Aug 14 Javascript
vue项目配置同一局域网可使用ip访问的操作
Oct 23 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
PHP实现的线索二叉树及二叉树遍历方法详解
2016/04/25 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
python实现学生通讯录管理系统
2021/02/25 Python
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
副总经理岗位职责
2014/03/16 职场文书
安全生产承诺书
2014/03/26 职场文书
社区党建工作方案
2014/06/10 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
上诉状格式
2015/05/23 职场文书
升学宴来宾致辞
2015/07/27 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android