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 相关文章推荐
Jquery中删除元素的实现代码
Dec 29 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
AngularJS快速入门
Apr 02 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
js确定对象类型方法
2012/03/30 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
Angular 如何使用第三方库的方法
2018/04/18 Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
2019/04/24 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
python 解压pkl文件的方法
2018/10/25 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
学校介绍信范文
2014/01/14 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
工作建议书范文
2014/05/13 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
机器人瓦力观后感
2015/06/12 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
Python中time与datetime模块使用方法详解
2022/03/31 Python