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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
微信小程序入门之指南针
Oct 22 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
Smarty中的注释和截断功能介绍
2015/04/09 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
jQuery Ajax实现跨域请求
2017/01/21 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
python遍历目录的方法小结
2016/04/28 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
MYSQL基础面试题
2012/05/13 面试题
个人简历自我评价八例
2013/10/31 职场文书
文明餐桌活动方案
2014/02/11 职场文书
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
保密工作整改报告
2014/11/06 职场文书
辞职信格式范文
2015/05/13 职场文书