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 showModalDialog模态对话框使用说明
Dec 31 Javascript
js indexOf()定义和用法
Oct 21 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
Dec 30 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
vue单页应用的内存泄露定位和修复问题小结
Aug 02 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中的数组处理函数实例总结
2016/01/09 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
jQuery动态添加删除select项(实现代码)
2013/09/03 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
Prototype框架详解
2015/11/25 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
Python获取当前时间的方法
2014/01/14 Python
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
人力资源主管职责范本
2014/03/05 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
追悼会答谢词范文
2015/09/29 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python