JavaScript继承方式(3)
2011-03-10 07:19
281 查看
3,继承工具函数三
父类,按原型方式写,即属性和方法都挂在原型上。
子类继承与父类
继承父类的属性和方法后,再添加子类自有属性,方法
测试如下,
可以看到这种写类方式,继承方式完全采用原型机制。
4,继承工具函数四
这种方式是目前比较流行的,51ditu网站的开发就是按照这种模式的。
按 构造函数+原型 方式写类,即属性挂在this上,方法挂在prototype上。
注意子类Man中要显示的调用父类构造器已完成父类的属性/字段拷贝。
extend调用,创建Man的实例
/** * @param {Function} subCls * @param {Function} superCls */ function extend(subCls,superCls) { subCls.prototype = new superCls(); }
父类,按原型方式写,即属性和方法都挂在原型上。
/** * 父类Person */ function Person(){} Person.prototype.nationality = 'China'; Person.prototype.getNationality = function() {return this.nationality;} Person.prototype.setNationality = function(n) { this.nationality = n;}
子类继承与父类
function Man() {} extend(Man,Person);
继承父类的属性和方法后,再添加子类自有属性,方法
Man.prototype.name = 'jack'; Man.prototype.getName = function() { return this.name;} Man.prototype.setName = function(n) { this.name=n;}
测试如下,
var m = new Man(); console.log(m); console.log(m instanceof Person);
可以看到这种写类方式,继承方式完全采用原型机制。
4,继承工具函数四
这种方式是目前比较流行的,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);
相关文章推荐
- 推荐JavaScript实现继承的最佳方式
- 深入理解javascript的5种继承方式
- JavaScript继承方式详解[转]
- DOM笔记(十三):JavaScript的继承方式
- JavaScript使用伪造方式实现继承
- Javascript继承方式
- JavaScript程序中实现继承特性的方式总结
- javascript实现继承的六种方式
- javascript继承的几种方式
- javascript实现继承的方式
- JavaScript继承(六种方式)(一)
- javascript创建对象、对象继承的实用方式详解
- JavaScript继承方式实例
- JavaScript是如何实现继承的(六种方式)
- JavaScript继承方式(1)
- JavaScript继承方式(4)
- javascript继承(七)—用继承的方式实现照片墙功能
- JavaScript之继承方式
- JavaScript--继承的几种方式
- 浅析javascript几种继承方式