JavaScript 继承方式（3）

3，继承工具函数三

  
  

   
   /*
   
   *
 * @param {Function} subCls
 * @param {Function} superCls
 
   
   */
   
   

   
   function
   
    extend(subCls,superCls) {
    subCls.prototype 
   
   =
   
    
   
   new
   
    superCls();    
}
  
  

　　父类，按原型方式写，即属性和方法都挂在原型上。

  
  

   
   /*
   
   *
 *  父类Person
 
   
   */
   
   

   
   function
   
    Person(){}
Person.prototype.nationality 
   
   =
   
    
   
   '
   
   China
   
   '
   
   ;
Person.prototype.getNationality 
   
   =
   
    
   
   function
   
   () {
   
   return
   
    
   
   this
   
   .nationality;}
Person.prototype.setNationality 
   
   =
   
    
   
   function
   
   (n) { 
   
   this
   
   .nationality 
   
   =
   
    n;}
  
  

　　子类继承与父：

  
  

   
   function
   
    Man() {}
extend(Man,Person);
  
  

　　继承父类的属性和方法后，再添加子类自有属性，方法 ：

  
  

   
   Man.prototype.name 
   
   =
   
    
   
   '
   
   jack
   
   '
   
   ;
Man.prototype.getName 
   
   =
   
    
   
   function
   
   () { 
   
   return
   
    
   
   this
   
   .name;}
Man.prototype.setName 
   
   =
   
    
   
   function
   
   (n) { 
   
   this
   
   .name
   
   =
   
   n;}
  
  

　　测试如下：

  
  

   
   var
   
    m 
   
   =
   
    
   
   new
   
    Man();
console.log(m);
console.log(m 
   
   instanceof
   
    Person);
  
  

　　可以看到这种写类方式，继承方式完全采用原型机制。

　　4，继承工具函数四

　　这种方式是目前比较流行的，51ditu网站的开发就是按照这种模式的。

  
  

   
   /*
   
   *
 * @param {Function} subCls 子类
 * @param {Function} superCls 父类
 
   
   */
   
   

   
   function
   
    extend(subCls,superCls) {    
    
   
   //
   
   暂存子类原型
   
   

   
       
   
   var
   
    sbp 
   
   =
   
    subCls.prototype;
    
   
   //
   
   重写子类原型--原型继承
   
   

   
       subCls.prototype 
   
   =
   
    
   
   new
   
    superCls();
    
   
   //
   
   重写后一定要将constructor指回subCls
   
   

   
       subCls.prototype.constructor 
   
   =
   
    subCls;
    
   
   //
   
   还原子类原型
   
   

   
       
   
   for
   
   (
   
   var
   
    atr 
   
   in
   
    sbp) {
        subCls.prototype[atr] 
   
   =
   
    sbp[atr];
    }
    
   
   //
   
   暂存父类    
   
   

   
       subCls.supr 
   
   =
   
    superCls;
}
  
  

　　按构造函数+原型 方式写类，即属性挂在this上，方法挂在prototype上。

  
  

   
   /*
   
   *
 *  父类Person
 
   
   */
   
   

   
   function
   
    Person(nationality){
    
   
   this
   
   .nationality 
   
   =
   
    nationality;
}
Person.prototype.getNationality 
   
   =
   
    
   
   function
   
   () {
   
   return
   
    
   
   this
   
   .nationality;}
Person.prototype.setNationality 
   
   =
   
    
   
   function
   
   (n) { 
   
   this
   
   .nationality 
   
   =
   
    n;}


   
   /*
   
   *
 *  子类Man
 
   
   */
   
   

   
   function
   
    Man(nationality,name) {
    Man.supr.call(
   
   this
   
   ,nationality); 
   
   //
   
   很重要的一句，调用父类构造器
   
   

   
       
   
   this
   
   .name 
   
   =
   
    name;
}
Man.prototype.getName 
   
   =
   
    
   
   function
   
   () {
   
   return
   
    
   
   this
   
   .name;}
Man.prototype.setName 
   
   =
   
    
   
   function
   
   (n) {
   
   this
   
   .name
   
   =
   
   n;}
  
  

　　注意子类Man中要显示的调用父类构造器已完成父类的属性/字段拷贝。

　　extend调用，创建Man的实：

  
  

   
   extend(Man,Person);

   
   var
   
    m 
   
   =
   
    
   
   new
   
    Man(
   
   '
   
   USA
   
   '
   
   ,
   
   '
   
   jack
   
   '
   
   );
console.log(m);
m.setName(
   
   '
   
   lily
   
   '
   
   );
console.log(m.name);