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 10件让人费解的事情
Feb 15 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
写一个Vue Popup组件
Feb 25 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
javascript使用canvas实现饼状图效果
Sep 08 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的论坛(2)
2006/10/09 PHP
PHP执行速率优化技巧小结
2008/03/15 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
一些mootools的学习资源
2010/02/07 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
javascript中Number对象的toString()方法分析
2014/12/20 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
vue登录注册实例详解
2019/09/14 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Python jieba库分词模式实例用法
2021/01/13 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
德国拖鞋网站:German Slippers
2019/11/08 全球购物
员工合理化建议书
2014/05/19 职场文书
宣传口号大全
2014/06/16 职场文书
入党函调证明材料
2014/12/24 职场文书
大学生党员个人总结
2015/02/13 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书