JavaScript实现多重继承的方法分析


Posted in Javascript onJanuary 09, 2018

本文实例讲述了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 相关文章推荐
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
JS实现标签页切换效果
May 04 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 Javascript
JS函数式编程实现XDM一
Jun 16 Javascript
element tree树形组件回显数据问题解决
Aug 14 Javascript
webpack多入口文件页面打包配置详解
Jan 09 #Javascript
Vue项目组件化工程开发实践方案
Jan 09 #Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 #Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 #Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 #Javascript
详解webpack babel的配置
Jan 09 #Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 #Javascript
You might like
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP 无限级分类
2017/05/04 PHP
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
vuex存取值和映射函数使用说明
2020/07/24 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
JavaScript实现前端倒计时效果
2021/02/09 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
会计专业毕业生自我评价
2013/09/25 职场文书
监理员的岗位职责
2013/11/13 职场文书
社会实践活动总结报告
2014/04/29 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
个人委托书范本汇总
2014/10/01 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
模范班主任事迹材料
2014/12/17 职场文书
研究生导师推荐信
2015/03/25 职场文书
单位介绍信格式范文
2015/05/04 职场文书
党员转正介绍人意见
2015/06/03 职场文书
中学生运动会广播稿
2015/08/19 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
Python list列表删除元素的4种方法
2021/11/01 Python
Python 键盘事件详解
2021/11/11 Python
MySql数据库触发器使用教程
2022/06/01 MySQL
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技