JavaScript继承方式（3）

3，继承工具函数三

?

1 2 3 4 5 6 7

/**  * @param {Function} subCls  * @param {Function} superCls  */ function extend(subCls,superCls) {     subCls.prototype = new superCls();  }

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

?

1 2 3 4 5 6 7

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

子类继承与父类

?

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

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

?

1 2 3

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

测试如下，

?

1 2 3

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

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

4，继承工具函数四

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

/**  * @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上。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

/**  *  父类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的实例

?

1 2 3 4 5

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