JS继承三

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