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 相关文章推荐
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
vue实现固定位置显示功能
May 30 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 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 根据IP地址控制访问的代码
2010/04/22 PHP
php object转数组示例
2014/01/15 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
php PDO异常处理详解
2016/11/20 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
详解angular element()方法使用
2017/04/08 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
python绘制多个曲线的折线图
2020/03/23 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
委托证明的格式
2014/01/10 职场文书
幼儿园亲子活动方案
2014/01/29 职场文书
大学四年个人自我小结
2014/03/05 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL