JavaScript 继承方式（3）

　　接上文：JavaScript 继承方式（2）

　　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);