详解JavaScript继承方式(三)
程序员文章站
2022-04-27 20:10:37
...
本文继续给大家来详解JavaScript继承方式,主要以代码的形式和大家分享,希望能帮助到大家。
1.继承工具函数三
/** * @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);
可以看到这种写类方式,继承方式完全采用原型机制。
2,继承工具函数四
这种方式是目前比较流行的,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继承方式(三)的详细内容,更多请关注其它相关文章!