ext.js继承

ext.js  -- extend继承

第一个参数：子类 
第二个参数：父类 
第三个参数：要覆盖的属性。 
这里需要强调一下，子类继承下来的是父类中通过superclass.prototype方式定义的属性（包括用此方法定义的函数）,而不继承superclass中的定义的属性和方法，如果子类中的方法名与父类中相同则会覆盖。例子

    父类

Js代码  

1. BaseClass = function() {  
2.  f1 = function() {  
3.   alert("f1 in base");  
4.  },  
5.  f2 = function() {  
6.   alert("f2 in base");  
7.  }  
8. }  
9. BaseClass.prototype = {  
10.  f3 : function() {  
11.   alert("f3 in base");  
12.  },  
13.  f4 : function() {  
14.   alert("f4 in base");  
15.  }  
16. };  

 
    子类

Js代码  

1. ChildClass = function() {  
2. }  
3. // 继承  
4. Ext.extend(ChildClass, BaseClass, {  
5.    f1 : function() {  
6.     alert("f1 in child");  
7.    },  
8.    f3 : function() {  
9.     alert("f3 in child");  
10.    }  
11.   });  

 
    实例化

Js代码  

1. var b = new ChildClass();  
2. b.f1();// 调用子类中的实现  
3. //b.f2();// 会报错，因为子类中没有该方法，并且父类中定义的f2是内部变量，作用域只有在内部可见（闭包）  
4. b.f3();// 继承并覆盖，调用子类的中的实现  
5. b.f4();// 继承，调用父类的中的实现  

 

     补充：通过对 JavaScript 的原型继承的了解，可以知道，实例变量的优先级是高于 prototype 的，参见我之前写的文章javascript中静态方法、实例方法、内部方法和原型的一点见解 又如以下例子：
    父类

Js代码  

1. BaseClass = function() {  
2.  this.f1 = function() {  
3.   alert("f1 in base");  
4.  },  
5.  this.f2 = function() {  
6.   alert("f2 in base");  
7.  }  
8. }  

 
    子类

Js代码  

1. ChildClass = function() {  
2.  ChildClass.superclass.constructor.call( this );   
3. }  
4. // 继承  
5. Ext.extend(ChildClass, BaseClass, {  
6.    f1 : function() {  
7.     alert("f1 in child");  
8.    },  
9.    f3 : function() {  
10.     alert("f3 in child");  
11.    }  
12.   });  

 
    实例化

Js代码  

1. var b = new ChildClass();  
2. b.f1();// 调用父类中的实现，注意不会调用子类中的实现  
3. b.f2();// 调用父类中的实现  
4. b.f3();// 调用子类中的实现  

 

    分析：在 ChildClass.superclass.constructor.call(this); 这句上， BaseClass 的 f1 成了 ChildClass 的变量，而不是 ChildClass.prototype 。由于实例变量的优先级是高于 prototype 的，所以上面的这个代码是达不到 override 的功能的。

    了解了以上知识，下面讲解一下extend的实现，先看最简单的继承，实现原理，1、将子类的原型prototype设置为父类的一个实例，也就是说把父类的实例赋值给子类的prototype（这样子类就有了父类原型的所有成员），2、重新将子类原型的构造器设置为子类自己，也就是把子类赋值给子类原型的构造器。
    以下代码把 subFn 的 prototype 设置为 superFn 的一个实例，然后设置 subFn.prototype.constructor 为 subFn。

Js代码  

1. function Extend(subFn, superFn) {  
2.  subFn.prototype = new superFn();  
3.  subFn.prototype.constructor = subFn;  
4. }  
5.   
6. //父类  
7. function Animal() {  
8.  this.say1 = function() {  
9.   alert("Animal");  
10.  }  
11. }  
12. //子类  
13. function Tiger() {  
14.  this.say2 = function() {  
15.   alert("Tiger");  
16.  }  
17.   
18. }  
19. //继承应用  
20. Extend(Tiger, Animal);  
21. var tiger = new Tiger();  
22. tiger.say1();// "Animal"  
23. tiger.say2();// "Tiger"  

 

     可以看到最简单的继承只做了两件事情，一是把 subFn 的 prototype 设置为 superFn 的一个实例，然后设置 subFn . prototype . constructor 为 subFn 。

原文——>>> 点击打开链接