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实现iframe跨页面调用函数的方法
Dec 13 Javascript
JS实现进入页面时渐变背景色的方法
Feb 25 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
Sep 27 Javascript
jQuery常见的选择器及用法介绍
Dec 20 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 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
优化PHP代码技巧的小结
2013/06/02 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
PHP7新增函数
2021/03/09 PHP
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
python数据类型强制转换实例详解
2020/06/22 Python
医学检验专业大学生求职信
2013/11/18 职场文书
工程部经理岗位职责
2013/12/08 职场文书
四年级科学教学反思
2014/02/10 职场文书
网络编辑职责
2014/03/01 职场文书
活动总结报告怎么写
2014/07/03 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
佛光寺导游词
2015/02/10 职场文书
加班费申请报告
2015/05/15 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL