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文件Cookie存取值示例代码
Feb 20 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
使用FileReader API创建Vue文件阅读器组件
Apr 03 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 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
SMARTY学习手记
2007/01/04 PHP
php接口技术实例详解
2016/12/07 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
Vue自定义toast组件的实例代码
2018/08/15 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
零基础学Python(一)Python环境安装
2014/08/20 Python
python实现的jpg格式图片修复代码
2015/04/21 Python
Python读写配置文件的方法
2015/06/03 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
python requests.post带head和body的实例
2019/01/02 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
python 装饰器重要在哪
2021/02/14 Python
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
机关会计岗位职责
2014/04/08 职场文书
写得不错的求职信范文
2014/07/11 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
培训师岗位职责
2015/02/14 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
Redis三种集群模式详解
2021/10/05 Redis