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实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
利用函数的惰性载入提高javascript代码执行效率
May 05 Javascript
JavaScript中的函数重载深入理解
Aug 04 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
javascript事件模型介绍
May 31 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
JavaScript canvas实现文字时钟
Jan 10 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
PHP+ajax 无刷新删除数据
2010/02/20 PHP
PHP异常处理Exception类
2015/12/11 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
php接口隔离原则实例分析
2019/11/11 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
jquery 上下滚动广告
2009/06/17 Javascript
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
python实现mysql的读写分离及负载均衡
2018/02/04 Python
django session完成状态保持的方法
2018/11/27 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
入党自我评价优缺点
2014/01/25 职场文书
铲车司机岗位职责
2014/03/15 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
收费员岗位职责
2015/02/14 职场文书
小学感恩节活动总结
2015/03/24 职场文书
2015年妇女工作总结
2015/05/14 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书