标签:, , , , ,

有了上一节的基础,我们这一节来模拟一个简单的继承

  1. Crab = function(){
  2.     this.leg = 10;
  3. };
  4.  
  5. Crab.prototype.say = function(){alert('we hava '+this.leg+' legs')};
  6.  
  7. GenCrab = function(){//螃蟹进化成人,变成蟹将了,只有2条腿了
  8.     this.leg = 2;
  9. }
  10.  
  11. function extend(child,father){//定义出一个继承函数,有2个参数,子类,父类
  12.     child.prototype = father.prototype;
  13. }
  14.  
  15. extend(GenCrab,Crab);//这样一来,蟹将也有say的方法了
  16.  
  17. gCrab = new GenCrab();
  18.  
  19. gCrab.say();//执行出来 we hava 2 legs

怎么样,蟹将已经将螃蟹的方法继承下来了吧?那如果要将父类的属性也继承下来呢?我想到2个方法:
第一、把父类的属性写入prototype中,如Crab.prototype.leg = 10
第二、GenCrab.prototype = new Crab();不知道你能不能看懂,呵呵,估计网上都没有人这样用过,但这样子写能把属性和方法全部继承,其中的奥秘,请您自己思考下

好了,我们进入Ext的主题,那么Ext是怎么将属性继承下来的呢?答案是第一种方法。如果您仔细看过我写的第一篇文章,您一定会说,规范约定,只有方法才写在prototype中的呀,怎么能把属性也写入呢?岂不是把清楚的事情又弄复杂了?

聪明的Ext团队,的的确确是用第一种方法的,只是在写法上稍稍改变了下

  1. function extend(child,father,override){//定义出一个继承函数,有2个参数,子类,父类,重载对象
  2.     child.prototype = father.prototype;
  3.    
  4.     for(var m in override){//将重载对象里面所有的东西(这里说的东西,无非就是属性和方法)都拿出来赋给子类,作为子类的属性或者方法
  5.         child.prototype[m] = override[m];
  6.     }
  7. }

这样一来,又有了新的规范了,把类的属性都往override里面写,把方法仍旧往prototype里面写,我下面举个例子

  1. function extend(child,father,override){//定义出一个继承函数,有2个参数,子类,父类,重载对象
  2.     child.prototype = father.prototype;
  3.    
  4.     for(var m in override){//将重载对象里面所有的东西(这里说的东西,无非就是属性和方法)都拿出来赋给子类,作为子类的属性或者方法
  5.         child.prototype[m] = override[m];
  6.     }
  7. }
  8.  
  9. Crab = function(){
  10.     //这里不写属性了
  11. };
  12.  
  13. extend(Crab,Object,{leg:10,eye:2});//让Crab继承绝对父类Object,并把属性写到这里来,因为螃蟹和蟹将都有2只眼睛,所以蟹将一会将继承这个属性
  14.  
  15. Crab.prototype.say = function(){alert('we hava '+this.leg+' legs, '+this.eye+' eyes')};//方法仍旧在这里定义
  16.  
  17. GenCrab = function(){
  18. }
  19.  
  20. extend(GenCrab,Crab,{leg:2});//这里,眼睛和脚都从父类那里继承过来了,但蟹将只有2只脚,所以我们只需要覆盖脚这个属性就可以了
  21.  
  22. gCrab = new GenCrab();
  23.  
  24. gCrab.say();// we have 2 legs, 2 eyes

好了,属性和方法都已经可以继承了,Ext.extend也已经差不多成型了,请接着看第三节《Ext.extend三部曲》




已经有2个留言

  1. 匿名 Says @ 08-04-14 3:10 am

    大有收获啊,谢谢……好人

  2. 匿名 Says @ 08-09-27 2:22 am

    太牛呗了!




留言