JavaScript继承方式(3)
3,继承工具函数三
view sourceprint?1 /**
2 * @param {Function} subCls
3 * @param {Function} superCls
4 */
5 function extend(subCls,superCls) {
6 subCls.prototype = new superCls();
7 }
父类,按原型方式写,即属性和方法都挂在原型上。
view sourceprint?1 /**
2 * 父类Person
3 */
4 function Person(){}
5 Person.prototype.nationality = China;
6 Person.prototype.getNationality = function() {return this.nationality;}
7 Person.prototype.setNationality = function(n) { this.nationality = n;}
子类继承与父类
view sourceprint?1 function Man() {}
2 extend(Man,Person);
继承父类的属性和方法后,再添加子类自有属性,方法
view sourceprint?1 Man.prototype.name = jack;
2 Man.prototype.getName = function() { return this.name;}
3 Man.prototype.setName = function(n) { this.name=n;}
测试如下,
view sourceprint?1 var m = new Man();
2 console.log(m);
3 console.log(m instanceof Person);
可以看到这种写类方式,继承方式完全采用原型机制。
4,继承工具函数四
这种方式是目前比较流行的,51ditu网站的开发就是按照这种模式的。
view sourceprint?01 /**
02 * @param {Function} subCls 子类
03 * @param {Function} superCls 父类
04 */
05 function extend(subCls,superCls) {
06 //暂存子类原型
07 var sbp = subCls.prototype;
08 //重写子类原型--原型继承
09 subCls.prototype = new superCls();
10 //重写后一定要将constructor指回subCls
11 subCls.prototype.constructor = subCls;
12 //还原子类原型
13 for(var atr in sbp) {
14 subCls.prototype[atr] = sbp[atr];
15 }
16 //暂存父类
17 subCls.supr = superCls;
18 }
按 构造函数+原型 方式写类,即属性挂在this上,方法挂在prototype上。
view sourceprint?01 /**
02 * 父类Person
03 */
04 function Person(nationality){
05 this.nationality = nationality;
06 }
07 Person.prototype.getNationality = function() {return this.nationality;}
08 Person.prototype.setNationality = function(n) { this.nationality = n;}
09
10 /**
11 * 子类Man
12 */
13 function Man(nationality,name) {
14 Man.supr.call(this,nationality); //很重要的一句,调用父类构造器
15 this.name = name;
16 }
17 Man.prototype.getName = function() {return this.name;}
18 Man.prototype.setName = function(n) {this.name=n;}
注意子类Man中要显示的调用父类构造器已完成父类的属性/字段拷贝。
extend调用,创建Man的实例
view sourceprint?1 extend(Man,Person);
2 var m = new Man(USA,jack);
3 console.log(m);
4 m.setName(lily);
5 console.log(m.name);
补充:web前端 , JavaScript ,