频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
JavaScript继承方式(3)
2011-05-04 13:59:50           
收藏   我要投稿

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

点击复制链接 与好友分享!回本站首页
相关TAG标签 方式
上一篇:JavaScript继承方式(2)
下一篇:JavaScript继承方式(4)
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站