实现Javascript编写类的方式1(原生方式)

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

  1. 构造方法方式
  2. 原型方式
  3. 构造方法+原型的混合方式

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

  • 构造方法方式

这是最基本的也是最像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 = 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);
3 }

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

 

　　　

posted on 2012-05-10 11:38  Hao Jia  阅读(429)  评论(5)    收藏  举报