浅析JavaScript继承方式(1)(3)

继承工具函数四

这种方式是目前比较流行的，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); 

继承工具函数五

/**  
 * @param {String} className  
 * @param {String/Function} superClass  
 * @param {Function} classImp  
 */ 
function $class(className, superClass, classImp){  
    if(superClass === "") superClass = Object;  
    var clazz = function(){  
        return function(){  
            if(typeof this.init == "function"){  
                this.init.apply(this, arguments);  
            }  
        };  
    }();  
    var p = clazz.prototype = new superClass();  
    var _super = superClass.prototype;  
    window[className] = clazz;  
    classImp.apply(p, [_super]);  
} 

定义父类Person

/**  
 * 父类 Person  
 */ 
$class('Person','',function(){  
    this.init = function(name){  
        this.name = name;  
    };  
    this.getName = function(){  
        return this.name;  
    };  
    this.setName = function(name){  
        this.name = name;  
    }  
}); 

子类Man

/**  
 * 子类 Man  
 */ 
$class('Man', Person, function(supr){  
    this.init = function(name, age){  
        supr.init.apply(this,[name]); // 该句很重要  
        this.age = age;  
    };  
    this.getAge = function(){  
        return this.age;  
    };  
    this.setAge = function(age){  
        this.age = age;  
    };  
});  
var m = new Man('Jack',25);  
console.log(m.name); // Jack  
console.log(m.age); // 25 

从输出看可以看到子类Man的确继承了父类的属性和方法。

原文链接：http://www.cnblogs.com/snandy/archive/2011/03/09/1977804.html