实现JavaScript编写类的方式

开发 前端
构造方法方式:这是最基本的也是最像Java写class的方式。这样的方法简单明了, 也符合JAVAer的胃口, 但是每new一个新对象, 就会在内存中分配一个sayName方法, 性能不是很好。

网上实现javascript写类的方法有很多, 总结下不外乎以下几种. 我自己学习总结了一下.

构造方法方式;原型方式;构造方法+原型的混合方式

现在具体分析一下以上方式的优缺点:

构造方法方式

这是最基本的也是最像Java写class的方式. 上代码:

  1. //创建一个Student类  
  2.  function Student(name){  
  3.       this.name = name;  
  4.       this.sayName = function(){  
  5.           alert(this.name);  
  6.       };  
  7.  }  
  8.  //new两个不同的Student.  
  9.  var jimmy = new Student('jimmy');  
  10.  var henry = new Student('henry');  
  11.  jimmy.sayName();//显示jimmy  
  12.  henry.sayName();//显示henry 

这样的方法简单明了, 也符合JAVAer的胃口, 但是每new一个新对象, 就会在内存中分配一个sayName方法, 性能不是很好.

原型方式

  1. //创建一个Student类  
  2.  //属性和方法都通过Student.prototype设置  
  3.  function Student(name){  
  4.      Student.prototype = name;  
  5.      Student.prototype.sayName = function(){  
  6.          alert(this.name);  
  7.      }  
  8.  }  
  9.  //new两个不同的Student.  
  10.  var jimmy = new Student('jimmy');  
  11.  var henry = new Student('henry');  
  12.  jimmy.sayName();//显示henry!!!  
  13.  henry.sayName();//显示henry!!! 

也许执行的代码和有些童鞋的期望有出入. 两次alert都弹出henry! 其实很好理解. 属性和方法都通过prototype设置. 不同对象的同一个属性或者方法都指向同一个内存, 所以henry是在jimmy后设置的. 所以henry把jimmy覆盖了.

混合方式

构造方法的方式可以为同一个类的每一个对象分配不同的内存, 这很适合写类的时候设置属性, 但是设置方法的时候我们就需要让同一个类的不同对象共享同一个内存了. 写方法用原型的方式***. 所以写类的时候需要把构造方法和原型两种方式混合着用. 废话少说, 看代码:

  1. //创建一个Student类  
  2.  //属性通过构造方法设置  
  3.  //方法通过Student.prototype设置  
  4.  function Student(name){  
  5.      this.name = name;  
  6.      Student.prototype.sayName = function(){  
  7.          alert(this.name);  
  8.      }  
  9.  }  
  10.  //new两个不同的Student.  
  11.  var jimmy = new Student('jimmy');  
  12.  var henry = new Student('henry');  
  13.  jimmy.sayName();//显示jimmy  
  14.  henry.sayName();//显示henry 

so far so good. 同一类的不同对象, 属性各自占有内存, 方法共享同一内存. 其实这里还是有一个小问题:

每new一个新对象, 就会执行一次

  1. Student.prototype.sayName = function(){  
  2.      alert(this.name);  

造成不必要的重复运算. 可以在类里面设置一个标记位, ***次执行的时候给这个标志位设置true, 如果为true就不再为prototype设置方法.

 

责任编辑:张伟 来源: jimmy_jia的博客
相关推荐

2023-05-22 15:35:10

JavaScriptWeb开发

2011-03-07 09:41:10

JavaScript

2012-09-17 10:35:41

JavaScriptJS代码

2011-03-08 09:15:04

JavaScript

2009-07-22 10:08:48

Javascript私

2011-06-27 13:57:42

JavaScript

2014-11-25 10:03:42

JavaScript

2016-11-30 18:35:03

JavaScript

2012-12-17 13:51:22

Web前端JavaScriptJS

2022-06-07 09:30:35

JavaScript变量名参数

2015-05-08 13:09:12

JavaScriipt抽奖程序

2014-04-21 10:14:52

PromisesJavaScript

2013-04-15 09:02:43

JavaScriptJS

2009-06-24 15:00:39

Javascript代

2021-06-09 10:45:12

JavaScript开发 编程

2010-01-27 17:08:01

Android Hel

2009-11-27 15:31:33

PHP类搜索定位目录树

2022-06-21 09:26:21

Shell脚本JavaScript

2009-01-04 09:08:30

面向对象继承接口

2011-05-25 16:23:35

Javascript类继承
点赞
收藏

51CTO技术栈公众号