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 select操作控制方法小结
May 26 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
微信小程序实现简单购物车功能
Dec 30 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
浅谈ThinkPHP的URL重写
2014/11/25 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
详解PHP中的Traits
2015/07/29 PHP
php bootstrap实现简单登录
2016/03/08 PHP
Prototype String对象 学习
2009/07/19 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
Python性能优化的20条建议
2014/10/25 Python
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
python 如何对logging日志封装
2020/12/02 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
UGG雪地靴荷兰官网:UGG荷兰
2016/09/09 全球购物
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
入学申请自荐信范文
2014/02/26 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
地陪导游欢迎词
2015/01/26 职场文书
故宫导游词
2015/01/31 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS