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 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
html数组字符串拼接的最快方法
Sep 16 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
JS判断时间段的实现代码
Jun 14 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 Javascript
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邮件类
2007/01/03 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
可以将word转成html的js代码
2010/04/11 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
python通过shutil实现快速文件复制的方法
2015/03/14 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python3 处理JSON的实例详解
2017/10/29 Python
如何通过Python实现标签云算法
2019/07/02 Python
python 默认参数相关知识详解
2019/09/18 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
解决Python二维数组赋值问题
2019/11/28 Python
如何基于python操作excel并获取内容
2019/12/24 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
django model通过字典更新数据实例
2020/04/01 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
教师个人鉴定材料
2014/02/08 职场文书
购房委托书范本
2014/09/18 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
四年级作文之植物
2019/09/20 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery