JavaScript实现多重继承的方法分析
程序员文章站
2022-04-29 12:01:41
本文实例讲述了javascript实现多重继承的方法。分享给大家供大家参考,具体如下:
1. 定义一个空的父类构造函数,然后通过prototype的方式为该父类定义属性和...
本文实例讲述了javascript实现多重继承的方法。分享给大家供大家参考,具体如下:
1. 定义一个空的父类构造函数,然后通过prototype的方式为该父类定义属性和方法
2. 定义一个空的子类的构造函数,然后将子类的原型绑定在父类的实例上,再将子类原型的父类也绑定在父类的实例上。通过prototype的方式为子类设置自己的属性和方法。
3. 定义一个空的孙类构造函数,然后将孙类的原型绑定到子类的实例上,再将孙类原型的父类绑定到子类的实例上。通过prototype方式为孙类定义自己的属性和方法。
4. 实例化一个孙类对象,通过调用该实例对象,调用自身的方法,也可以调用孙类的父类即文中的子类的方法,也可直接调用最大父类即这里父类的方法,也可以为当前对象添加属性和方法。
function person(){} person.prototype.name = "人";// 为人类创建一个name属性 person.prototype.say = function(content){// 为人类创建一个说话的方法 if(!this.name){ // 如果对象不存在name属性,则使用原型链的name this.name = this.__proto__.name; } console.log("我是" + this.name + ",我想说"+content); }; function parent(){} parent.prototype = new person(); // 设置parent类继承person类 parent.prototype.superclass = new person();// 设置superclass保存父类person的方法属性 parent.prototype.name = "父辈类";// 设置parent类的name属性 parent.prototype.say = function(){// 设置parent类自己的 say 方法 console.log("我是parent类的say方法!"); }; function child(){} child.prototype = new parent();// 设置child类继承parent类 child.prototype.superclass = new parent();// 设置superclass保存父类parent的方法属性 child.prototype.say = function(){ //设置child类自己的say方法 console.log("我是child类的say方法!"); } var c = new child();// 实例化一个child对象 c.say(); // 调用自身原型的say方法,输出:我是child类的say方法! c.superclass.say(); // 调用父类parent的say方法,输出: 我是parent类的say方法! c.superclass.superclass.say("哈哈");// 直接调用最大的父类person的say方法(方法中的this指向person),输出:我是人,我想说哈哈" // 用call调用最大的父类person的say方法(方法中的this指向实例化对象c,但此时c并没有name属性,所以this.name用的是parent的name) c.superclass.superclass.say.call(c,"嘻嘻"); // 输出:我是父辈类,我想说嘻嘻 c.name = "子类实例";// 给当前对象增加name属性 // 还是用call调用最大父类person的say方法(此时c对象中已经有name属性); c.superclass.superclass.say.call(c,"我是子类的实例化对象"); // 输出:我是子类实例,我想说我是子类的实例化对象
ps:多重继承可以在原型对象上新增一个属性用以保存父类的对象和属性,子类调用的时候使用superclass点出父类方法,这样一来就解决了父类和子类方法同名,子类继承父类之后会覆盖父类方法的问题。
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇: React中常见的动画实现的几种方式