javascript中定义类的方法详解


Posted in Javascript onFebruary 10, 2015

JS中定义类的方式有很多种:

1、工厂方式

  function Car(){ 

   var ocar = new Object; 

   ocar.color = "blue"; 

   ocar.doors = 4; 

   ocar.showColor = function(){ 

    document.write(this.color) 

   }; 

   return ocar; 

  } 

  var car1 = Car(); 

  var car2 = Car();

  调用此函数时将创建新对象,并赋予它所有的属性和方法。使用此函数可以创建2个属性完全相同的对象。当然我妹可以通过给它传递参数来改版这种方式。

  function Car(color,door){ 

   var ocar = new Object; 

   ocar.color = color; 

   ocar.doors = door; 

   ocar.showColor = function(){ 

    document.write(this.color) 

   }; 

   return ocar; 

  } 

  var car1 = Car("red",4); 

  var car2 = Car("blue",4); 

  car1.showColor()  //output:"red" 

  car2.showColor()  //output:"blue"

  现在可以通过给函数传递不同的参数来得到具有不同值的对象。
  在前面的例子中,每次调用函数Car(),都要创建showcolor(),意味着每个对象都有一个自己的showcolor()方法。

 但是事实上,每个对象斗共享了同一个函数。
  虽然可以在函数外定义方法,然后通过将函数的属性指向该方法。

  function showColor(){ 

   alert(this.color); 

  } 

  function Car(){ 

   var ocar = new Object(); 

   ocar.color = color; 

   ocar.doors = door; 

   ocar.showColor = showColor; 

   return ocar; 

  }

  但是这样看起来不像是函数的方法。

2、构造函数方式

  构造函数方式同工厂方式一样简单,如下所示:

  function Car(color,door){ 

   this.color = color; 

   this.doors = door; 

   this.showColor = function(){ 

    alert(this.color) 

   }; 

  } 

  var car1 = new Car("red",4); 

  var car2 = new Car("blue",4);

  可以看到构造函数方式在函数内部没有创建对象,是用this关键字。因为在调用构造函数时已经创建了对象,而在函数内部只能用this来访问对象属性。
  现在用new来创建对象,看起来像那么回事了!但是它同工厂方式一样。每次调用都会为对象创建自己的方法。

3、原型方式

  该方式利用了对象的prototype属性。首先用空函数创建类名,然后所有的属性和方法都被赋予prototype属性。

  function Car(){ 

  } 

  Car.prototype.color = "red"; 

  Car.prototype.doors = 4; 

  Car.prototype.showColor = function(){ 

   alert(this.color); 

  } 

  var car1 = new Car(); 

  var car2 = new Car();

  在这段代码中,首先定义了一个空函数,然后通过prototype属性来定义对象的属性。调用该函数时,原型的所有属性都会立即赋予要创建的对象,所有该函数的对象存放的都是指向showColor()的指针,语法上看起来都属于同一个对象。
  但是这个函数没有参数,不能通过传递参数来初始化属性,必须要在对象创建后才能改变属性的默认值。
  原型方式有个很严重的问题就是当属性指向的是对象时,如数组。

  function Car(){ 

  } 

  Car.prototype.color = "red"; 

  Car.prototype.doors = 4; 

  Car.prototype.arr = new Array("a","b"); 

  Car.prototype.showColor = function(){ 

   alert(this.color); 

  } 

  var car1 = new Car(); 

  var car2 = new Car(); 

  car1.arr.push("cc"); 

  alert(car1.arr);  //output:aa,bb,cc 

  alert(car2.arr);  //output:aa,bb,cc

  这里由于数组的引用值,Car的两个对象指向的都是同一个数组,所以当在car1添加值后,在car2中也可以看到。
 联合是用构造函数/原型方式就可以像其他程序设计语言一样创建对象,是用构造函数定义对象的非函数属性,用原型方式定义对象的方法。

  function Car(color,door){ 

   this.color = color; 

   this.doors = door; 

   this.arr = new Array("aa","bb"); 

  } 

  Car.prototype.showColor(){ 

   alert(this.color); 

  } 

  var car1 = new Car("red",4); 

  var car2 = new Car("blue",4); 

  car1.arr.push("cc"); 

  alert(car1.arr);  //output:aa,bb,cc 

  alert(car2.arr);  //output:aa,bb

5、动态原型方式 

  动态原型的方式同混合的构造函数/原型方式原理相似。唯一的区别就是赋予对象方法的位置。

  function Car(color,door){ 

   this.color = color; 

   this.doors = door; 

   this.arr = new Array("aa","bb"); 

   if(typeof Car._initialized == "undefined"){ 

    Car.prototype.showColor = function(){ 

     alert(this.color); 

    }; 

    Car._initialized = true; 

   } 

  }

 动态原型方式是使用一个标志来判断是否已经给原型赋予了方法。这样可以保证该方法只创建一次

6、混合工厂方式

  它的目的师创建假构造函数,只返回另一种对象的新实例。

  function Car(){ 

   var ocar = new Object(); 

   ocar.color = "red"; 

   ocar.doors = 4; 

   ocar.showColor = function(){ 

    alert(this.color) 

   }; 

   return ocar; 

  }

  与工厂方式所不同的是,这种方式使用new运算符。 

以上就是全部的创建对象方法。目前使用最广泛的就是混合构造函数/原型方式,此外,动态原型方式也很流行。在功能上与构造函数/原型方式等价。

以上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
Javascript 生成指定范围数值随机数
Jan 09 Javascript
WordPress JQuery处理沙发头像
Jun 22 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 Javascript
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
JavaScript判断浏览器类型的方法
Feb 10 #Javascript
javascript定时器完整实例
Feb 10 #Javascript
jQuery搜索子元素的方法
Feb 10 #Javascript
jQuery搜索同辈元素方法
Feb 10 #Javascript
Jquery搜索父元素操作方法
Feb 10 #Javascript
jQuery表单域属性过滤器用法分析
Feb 10 #Javascript
jQuery子属性过滤选择器用法分析
Feb 10 #Javascript
You might like
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
destoon之一键登录设置
2014/06/21 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
JavaScript中的数据类型转换方法小结
2015/10/26 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
.NET面试10题
2014/02/24 面试题
函授毕业生自我鉴定
2013/11/06 职场文书
自我评价怎么写好呢?
2013/12/05 职场文书
在校学生职业规划范文
2014/01/08 职场文书
高中运动会入场词
2014/02/14 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
圆明园观后感
2015/06/03 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技